Input Validity when dynamically displaying fields

Question

My form requirement has 12 toggles. If a toggle is selected, a text area field is displayed and input is required. All text area fields are hidden unless the related toggle is selected.

If 2 or more toggles are selected, all required and displayed text area fields are highlighted as required as expected. If only 1 toggle is selected, the text area input field is not highlight as required when the submit button is selected.

How can I get the required input highlighting around the text area box to work if only 1 toggle is selected? COMPONENT: Question 1

<lightning:input aura:id="question1" name="question1"
                 type="toggle" label="" variant="label-hidden"
                 value="{!v.pq.Field_1__c}" checked="{!v.pq.Field_1__c}"
                 messageToggleActive="Yes" messageToggleInactive="No"
                 onchange="{!c.handleQ1}" />


<aura:if isTrue="{!v.pq.Field_1__c}">
    <lightning:textarea label="Question 1 Explanation" aura:id="myForm" name="Q1Explain" value="{!v.pq.Field_1_Explain__c}" required="true" maxlength="255" />
</aura:if>


<!-- Question 2 -->
<label class="slds-form-element__label" for="toggle">Question 2</label>

<lightning:input aura:id="question2" name="question2"
                 type="toggle" label=""variant="label-hidden"
                 value="{!v.pq.Field_2__c}" checked="{!v.pq.Field_2__c}"
                 messageToggleActive="Yes" messageToggleInactive="No"
                 onchange="{!c.handleQ2}"
                 />

<aura:if isTrue="{!v.pq.Field_2__c}">
    <lightning:textarea label="Question 2 Explanation" aura:id="myForm" name="Q2Explain" value="{!v.pq.Field_2_Explain__c}" required="true" maxlength="255" />
</aura:if>




var validForm = component.find('myForm').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);

        if(validForm){
            helper.saveForm(component, helper);
        }

Answer 1

SecureComponent#find returns either undefined, a SecureComponent, or an Array of SecureComponent (SecureComponent[]), depending on the number of elements. You need to check for this first. Line 2 in this example checks to see if it is undefined (fields?) and if not, then checks if it has a length property ('length' in fields?). If it has a length, return the Array, otherwise if it is defined, return a new Array, otherwise return an empty array.

let fields = component.find('myForm');
fields = fields? ('length' in fields? fields: [fields]):[];
let validForm = fields.reduce(...