cannot access aura:id of dynamically created Lightning Element [duplicate]

Question

When I click on lightning:button(Create), I am able to dynamically create lightning:input element from js controller but When I click on lightning:button(Set Value), I am not able to set value for the lightning:input by accessing its aura:id. I am getting error as " [Cannot read property 'set' of undefined]"...Even I tried the answer posted in(Aura:Id of dynamically created compontns cannot be accessed) but there they have used ui:button but here I am using lightning:input.

<aura:component>
     <lightning:button label="Create" onclick="{!c.createElements}" variant="brand"/> <br/>
     <div aura:id="createdynamicInputText"></div>
     <lightning:button label="Set Value" onclick="{!c.setValue}" variant="brand"/> <br/>
</aura:component>

js controller

createElements : function(component, event, helper){
         $A.createComponent(
                "lightning:input",
                {
                    "aura:id":"objectField",
                    "label": "User Name",
                    "type": "text"
                },
                function(msgBox){                
                    if (component.isValid()) {
                        var targetCmp = component.find('createdynamicInputText');
                        var body = targetCmp.get("v.body");
                        body.push(msgBox);
                        targetCmp.set("v.body", body); 
                    }
               }
           ); 
    },
    setValue : function(component, event, helper){
        component.find("objectField").set("v.value","Testing");
    }

I have also tried the below code but not working for my thing,

setValue : function(component, event, helper){
        //component.find("objectField").set("v.value","Testing");
        var input = component.find({ instancesOf : "lightning:input" })[0];
        input.set("v.value", "Testing");
    } 

can anyone please help me here to solve this issue, thanks in advance

Answer 1

You have a few problems here...

1. A lightning input requires a name attribute

2. Your adding the new component to the body of a child component. component.find() does not look inside other components

3. Finding dynamic components using component.find() is buggy (see Dynamically created component with aura:id, set as a Facet inside a parent component, is not found when calling find() and passing in aura:id)

So, you can obviously fix (1) by doing adding name as an attribute:

     $A.createComponent(
            "lightning:input",
            {
                "aura:id":"objectField",
                "label": "User Name",
                "type": "text",
                "name": "objectField"
            },

You can fix (2) by adding the component to the parents body instead of inside that div:

    <lightning:button label="Create" onclick="{!c.createElements}" variant="brand"/> <br/>
    <div aura:id="createdynamicInputText"></div>
    <lightning:button label="Set Value" onclick="{!c.setValue}" variant="brand"/> <br/>
    {!v.body}

Then

            function(msgBox){
                var body = component.get("v.body");
                body.push(msgBox);
                component.set("v.body", body);
             }

And you can work around (3) in a number of way. If you do (1) and (2), then you can successfully use the workaround that you, yourself, had attempted

setValue : function(component, event, helper){
    //component.find("objectField").set("v.value","Testing");
    var input = component.find({ instancesOf : "lightning:input" })[0];
    input.set("v.value","Testing");
}

Answer 2

Can you try splitting the statement? Sometimes I find that it makes a difference if you use multiple statements or string them together:

setValue : function(component, event, helper){
    var element = component.find("objectField");
    element.set("v.value","Testing");
}