1

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

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.