1

I have added a component dynamically "ChildContainer" in a div's body. Now I want to access it and want to add again a new component dynamically to the newly create component.

Main Component Markup:

<aura:component>
  <aura:handler name="init" action="{!c.init}" value="{!this}"/>
  <ui:inputCheckbox aura:id="chk" text="Add" change="{!c.handleChange}"/>
  <div id="MainDiv" aura:id="MainDiv"></div>
</aura:component>

Controller Code:

({
init:function(component,event,helper){
    var divCmp = component.find("MainDiv");
    var divBody = divCmp.get("v.body");
    $A.createComponent("c:ChildContainer",
            {
                "Id":"ChildCmp",
                "aura:id": "ChildCmp",
            }, 
             function(newCmp){                    
                divCmp.set("v.body", divBody.concat(newCmp));
            });
},
handleChange:function(component,event,helper){
    var checkCmp = event.getSource();
    var chkvalue = checkCmp.get("v.value");

    if(chkvalue == true){
        var newCmp = component.find("ChildCmp");
        newBody = newCmp.get("v.body");

        $A.createComponent("c:TextBoxComponent",
                    {
                        "Id" : "TBId",
                        "inputText" : "Enter Value",
                        "inputValue":"Test"                        
                    }, 
                     function(newTB){
                       newCmp.set("v.body", newBody.concat(newTB));
                    });
    }
}
})

ChildContainer Markup:

<aura:component >
  <aura:attribute name="Id" type="string"/>
  <div id="{!v.Id}" aura:id="{!v.Id}" width="70%">{!v.Id}</div>
</aura:component>

TextBoxComponent Markup:

<aura:component >
  <aura:attribute type="String" name="Id" />
  <aura:attribute type="String" name="inputText" />
  <aura:attribute type="String" name="inputValue" />

 <div class="slds-form-element">
  <label class="slds-form-element__label">{!v.inputText}</label>
  <div class="slds-form-element__control">
   <ui:inputNumber aura:id="{!v.Id}" class="slds-input"  value="{!v.inputValue}" placeholder="{!v.inputText}"/>
  </div>
 </div>
</aura:component>

Getting undefined error when try to access component using component.find("ChildCmp")

Your Answer

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

Browse other questions tagged or ask your own question.