Error handling for iterable child component inside parent in lightning web components (LWC)

Question

In my parent component , I have used child component inside and iteration. So for example child component is present twice in parent component. Now I want to show error message when on of the required field is missing in one of the child component. But the error message gets displayed in both the component. I am passing the value missing attribute from parent after performing check, but whenever there is iteration, it becomes issue as I am not sure how I can perform check here for fields of all components and pass respected "valueMissing" flag as the number of times child component occurs in parent is not fixed. Below is sample code for HTML part:

<template for:each={Mainobj} for:item="obj" for:index="index">
    <c-test-child selected-val = {obj.valueSelected__c}
                  recordsParent={picklistOptions}
                  onselected={selectedPicklistVal}
                  oncleared = {onClearPicklistVal}
                  error-msg="This field is required"
                  required-data = {valueMissing}
                  >
     </c-testChild>
</template>

Answer 1

In the child component, you can use a getter to achieve the same.

get showErrorMessage(){
   this.selectedPicklist===null ? return 'Value Missing'? return null;
}