1

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?

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
  • Thank you for your recommendation. However, I ended up with a much simpler solution. – Hareesh P Mohan Mar 29 '18 at 3:15
  • Post the solution that way it will be useful for someone – RedDevil Mar 29 '18 at 3:35
  • oops, I was typing the solution.. :) I had to write it as a separate answer due to the character limit in comments.. – Hareesh P Mohan Mar 29 '18 at 3:37
1

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..

Your Answer

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

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