How to access aura:id of a tag present in child component in a parent component controller

Question

I have created a form where more than 10 radio groups were being used, so instead of using lightning:input tag several times , I made a child component of the radio group . And used it several times in my parent component form by passing label, name and value from the parent component via attributes.

So, all these radio group input fields are required , so after the form is submitted, in my parent controller I want to validate that all required fields have been filled.

I want to use reduce function for that in order to validate all required fields collectively in my parent component controller. So for that component.find('aura:id of my child component's field') is required.

How can I access child component aura ids in my parent component controller, Is the approach that I am following correct? Or there is a better way to do it.

Answer 1

The recommended way to communicate between parent/child components is via events. However, in this case it might make more sense to provide a callable method in the child component that performs your validation and call that function from the parent:

child.cmp:

<aura:method name="doValidityCheck" action="{!c.doValidityCheck}" >
  <aura:attribute name="isValid" type="boolean" default="false" access="PUBLIC"/>
</aura:method>

childController.js

({
  doValidityCheck : function(component, event){
    //do validity check here
    return booleanValue;
  }
})

parent.cmp

<c:child aura:id="myChild" />
<lightning:button label="Check Validity" onclick="{!c.checkChildValidity}" />

parentController.js

({
  checkChildValidity : function(component, event){
     var child = component.find("myChild");
     var isChildValid = child.doValidityCheck();
  }
})