How to capture input from the child Component (Aura) without events

Hi,

Here let's talk about how we can capture the data from Child component without events.

Scenario:

Capture the input from the child component when the user clicks on the "Submit" button which is part of the parent component.

Solution:

Let's take two components 

• ContainerComponent (Parent)
• DataCaptureComponent(Child)

Let's Create a component "DataCaptureComponent" where we have input fields only to capture.

DataCaptureComponent.cmp: (child)

<aura:component implements="flexipage:availableForAllPageTypes" access="global" >

      <aura:attribute name="accountObj" type="Account" default="{'sobjectType': 'Account',

                                                                        'Name':'',

                                                                        'Type':'',

                                                                        'Industry':''}"/> 

    <lightning:input type="text" value="{!v.accountObj.Name}" label="Account Name"/>

    <lightning:input type="text" value="{!v.accountObj.Type}"  label="Type"/>

    <lightning:input type="text" value="{!v.accountObj.Industry}" label="Industry"/>

</aura:component>

in the above component, we have 3 inputs with the attribute "accountObj" and we are not firing any event.

ContainerComponent.cmp:(parent)

<aura:component implements="flexipage:availableForAllPageTypes" access="global" controller="AccountSaveController">

    <aura:attribute name="accountId" type="String"/> 

    <lightning:card>

    <aura:set attribute="title">

            <lightning:icon iconName="standard:account" size="small"/>

            Account Input

        </aura:set>  

         <p class="slds-p-horizontal_small">

            <!--Include DataCaptureComponent with "aura:id" as shown below-->            

             <c:DataCaptureComponent aura:id="recordInfo"/>

             <div class="slds-p-top_small">

                  <lightning:button variant="brand" label="Submit" title="Brand action" 

                          onclick="{!c.saveRecord}"/>

                  &nbsp;<aura:if isTrue="{!v.accountId}">

              <b>Account record is created Id:{!v.accountId}</b>

              </aura:if>     

             </div>              

         </p>         

    </lightning:card>

</aura:component>

ContainerComponentController.js:

({

    saveRecord : function(component, event, helper) {

       /*To capture input from child component "DataCaptureComponent" we have to use "find()" 

        with the help of  aura:id="recordInfo" */

        var actRecComp = component.find('recordInfo');

       /* Once you get the comonent you can capture all the properties from the component here 

        we are capturing the property "accountObj" from child component*/

        if(actRecComp.get('v.accountObj')){

            var action = component.get("c.saveAccount");

            action.setParams({

               /*passing values from the child by capturing the property*/

                "actObj": actRecComp.get('v.accountObj')

            });

            action.setCallback(this, function(response) {

                var state = response.getState();

                if (state === "SUCCESS") {

                    var accountId = response.getReturnValue();                    

                    component.set("v.accountId",accountId);

                }

            });

            $A.enqueueAction(action);

        }

    }

})

In the above "ContainerComponent" we have included a component called "DataCaptureComonent" and gave the "aura: id". With the help of "find" and "get" methods, we are capturing Component and its properties.

Here "<lightning:button>" is part of "ContainerComponent".

Output:

Capture Account info from the child without events

Reference:

https://www.youtube.com/watch?v=MHJASW7DN9w&list=PL-JzyFWuCbkKk0c6WqDdFrjev-wD0SndG (Salesforce Techbook)

https://developer.salesforce.com/docs/component-library/bundle/lightning:card/example#lightningcomponentdemo:exampleCardCustom