How to call child component controller with iteration from parent component controller

Question

I have similar requirement to this How to call child component controller function/helper from Parent Component Controller the parent component has a button that will call a function from child component. For more specific, I have function that should show error messages on the individual fields while in the <aura:iteration> upon click of Save button.

ParentComponent.cmp

<aura:component>
    <aura:iteration items="{!v.listRec}" var="individualRec">
        <c:ChildComponent individualRec="{!individualRec}" aura:id="cComp"/>
    </aura:iteration>
    <button type="button" onclick="{!c.save}">Save</button>
</aura:component>

ParentController.js

({
    save: function(component, event, helper) {
        var childCmp = component.find("cComp");
        childCmp.sampleMethod();
    }
})

ChildComponent.cmp

<aura:component>
    <aura:method name="sampleMethod" action="{!c.childSave}" access="PUBLIC" />
    <aura:attribute name="individualRec" type="List" />

    <label>Email</label>
    <ui:inputText aura:id="inputEmail" value="{!v.individualRec.Email}" /
</aura:component>

ChildController.js

({
    childSave : function(component, event, helper) {
        var inputEmail = component.find("inputEmail");
        var varEmail = inputEmail.get("v.value");
        if ($A.util.isEmpty(varEmail)) {
            inputEmail.set("v.errors", [{message:"Complete this field"}]);
        }
    }
})

Answer 1

Since the child component : <c:ChildComponent aura:id="cComp"/> is inside an iteration, which means the child components generated will have the same aura:id.

As a result of that, var childCmp = component.find("cComp"); returns an Array of Child Component instance rather than one Child Component instance.

So you need iterate for the array of child component instances and call their respective sampleMethod (aura:method).

ParentController.js will look like below:

({
    save: function(component, event, helper) {
        var childCmp = component.find("cComp"); // return array
        for(var i = 0;i < childComp.length;i++){
            childCmp[i].sampleMethod();
        }
    }
})