Child component validation on Parent Component's Save

Question

My Lightning component structure is as follows

<c:ParentComponent>
     <aura:iteration>
           <c:childComponent />
     </aura:iteration>

     <ui:button label="Save" press="{!c.validateAndSave}"/>
</c:ParentComponent>

Child component has a lot of validations. These validations would fire on 'blur' event of input* fields (say inputNumber) fields in child component. One of them is given below.

generalValidation : function(component, event, helper){
    var changedFieldId = event.getSource().getLocalId();
    var changedFieldCmp = component.find(changedFieldId);
    var enteredValue = changedFieldCmp.get("v.value");

    //--Check for -ve entry
    if(enteredValue < 0){
        changedFieldCmp.set("v.errors", [{message: $A.get('$Label.c.twod_value_cannot_be_negative')}]);
        return false;
    }
    return true;
}

Similarly, based on business conditions there are more. I didn't want to make this validation function bulk.

Parent Component has a 'Save' button. On click of it, it has to validate all child components again.

How can I achieve that?

Methods I have tried is to create an empty object and pass it onto child component. Whenever there's an error, I would update the same. Again, on Save, I will check for any errors in the object and prevent submission. Little complicated but works!

Alternatively, I could have an error counter attribute on parent. This will be incremented whenever there's an error. This approach is complicated too.

Keeping same aura:Id and checking for validity is also not an option in my case. So is exposing child methods to parent and calling them on Save.

Do you have any other unique way?

Answer 1

If you dont want to use aura methods, The only other clean solution i can think of is using events:

1. You can use an application event in parent which will get fired it its children.
2. The child components will listen to it and do the validation and fire a component event back to parent to confirm if validation is successful.
3. The parent can listen to this component event and based on the response from children can take the next course of action save or not save

Answer 2

Thank you @RedDevil for the answer. However, this is how I did it..

My code looked like this:

<aura:iteration items="{!v.recordList}" var="record">
           <c:childComponent record="{!record}"/>
     </aura:iteration>

In child component's do init, I updated the record with an error object like so..

  doinit : function(cmp, event, helper){

           //create an error object
           var errorObj = { 
                   generalValidationError : null, 
                   requiredFieldError :null 
           }

           //attach it to record
           cmp.set("v.record.errors", errorObj);
  }

Now, we can populate this error object with the validation errors if any. Since bound expression is used, We can access the errors in parent component as well.

So, on click of save from the parent component, we just have to loop through these records again and see if has a generalValidationError or requiredFieldError . If any of these is not null, show error message.

happy coding..