0

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.

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" />
</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;
  }
})

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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