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);
}