1

I am passing the value for the readonly attribute from the parent to the inner child lightning input.

Parent cmp:

<c:Childcmp  isReadOnly="{!v.isReadOnly}" />

Parent ctrller:

handleEvent : function(component, event, helper) {
    var name =event.getParam("ReadOnly");
     if(name=="true")
    {
        component.set("v.isReadOnly",name);
    }
    else
    {
        component.set("v.isReadOnly",name);
    }
    }

Child cmp:

<lightning:input disabled="{!v.isReadOnly}"/> (or)
<lightning:input readonly="{!v.isReadOnly}"/>

Child Ctrller:(Onchange of input)

 var valueOfElementChanged=event.getSource().get("v.value");
 if(valueOfElementChanged=='License')
            {     
                var compEvents = component.getEvent("componentEventFired");
                compEvents.setParams({ "ReadOnly" : "true" });
                compEvents.fire();
            }
            else{
                var compEvents = component.getEvent("componentEventFired");
                compEvents.setParams({ "ReadOnly" : "false" });
                compEvents.fire();
            }

Its working well when the readonly attribute is sent as true, but when false value is sent, still its readonly not changing it to editable.

When I inspect the lightning input field, I still see the read only attribute in the tag, which should be removed actually when it as false.

How to make it as editable when it an false value is set?

0

We set false or true value to an attribute like

component.set("v.isReadOnly",false);

not

component.set("v.isReadOnly","false");
3
  • I am setting name which has false value. – Sandra Robert Apr 15 '20 at 8:47
  • okay i guess you edited your question – User6670 Apr 15 '20 at 8:47
  • can you share when handleEvent is called also if name=="true" try doing component.set("v.isReadOnly",true); instead of using name and same for false – User6670 Apr 15 '20 at 8:48
0

This should be your Parent ctrller: if you want to use the Same string type for the event(componentEventFired) attribute(ReadOnly).

handleEvent: function(component, event, helper) {
  const isReadOnly = event.getParam("ReadOnly");
  component.set("v.isReadOnly", (isReadOnly === 'true'));
}

UPDATE:

And if you can change the event(componentEventFired) attribute(ReadOnly) from String to Boolean then you just need to do this in Parent ctrller:

handleEvent: function(component, event, helper) {
  const isReadOnly = event.getParam("ReadOnly");
  component.set("v.isReadOnly", isReadOnly);
}

and one more change required in Child Ctrller:(Onchange of input)

const valueOfElementChanged = event.getSource().get("v.value");

const compEvents = component.getEvent("componentEventFired");
compEvents.setParams({ "ReadOnly" : (valueOfElementChanged === 'License') });
compEvents.fire();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.