1

I try to figure out how to check if all Lightning:Input components are valid and if not, collect the errors and than e.g. disable a save button so that the user just can save if all errors are resolved. My idea was to have an attribute (e.g. List) and put the id from the component into this list if the value is still not valid. If the user correct this value than remove the id of the List. The problem is - I have not clue how to get an id of these components if I have an iteration.

<aura:iteration items="{!v.allLines}" var="line">
  <tr>
    <td data-label="Delivery Date" class="slds-form--inline">
      <lightning:input aura:id="myId" type="date" name="date" value="{!line.Value__c}" onchange="{!c.check}"/>
    </td>
 </tr>
/>

So lets say the js function that this value and there is an error because the value is not correct. How to put this id(or whatever of this component) into my error attribute? The only thing that I get from event.getSource() is the 'value' but nothing more. When I do

console.log(JSON.stringify(inputField));

The output is: {"globalId":"20:253;a","isValid":true}

So I thought I could use this globalId to put it into the error attribute but I have not clue how to grab this Id.

What am I doing wrong here? Or is there a better solution?

2

Have you checked the trailhead module Input Data Using Forms. You can do something as below using JavaScript reduce function.

The JavaScript reduce() method reduces the array to a single value that’s captured by validSoFar, which remains true until it finds an invalid field, changing validSoFar to false. An invalid field can be a required field that’s empty, a field that has a number lower than a specified minimum number, among many others.

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

If you have a custom logic to check if line.Value__c input is valid in your js helper, then you can iterate through component.find('myId') array (this will be array as it is used in iteration) and do something like this:

for(var v in component.find('myId'){

    if(component.find('myid').get('v.value')){
       // call a function or check if this value is valid. If valid, then remove this value from you invalid list.
// to find global If of your component, use component.find('myId').getGlobalId() 
    }

}

Hope this helps.

0

What I use to do is define my components:

    <div class="slds-col slds-size_4-of-12">
        <lightning:input aura:id="lastName" label="Last Name" placeholder="Enter Last Name" required="true"
                         value="{!v.contact.LastName}"
                         messageWhenValueMissing="Last Name is mandatory"/>
    </div>

then in controller on the onClick of the search or submit button:

I do a check:

     // Just check for validations on controller and push all the logic to helper
    var checkLastNameValid = component.find("lastName");
    checkLastNameValid.showHelpMessageIfInvalid();
    if (checkLastNameValid.get("v.validity").valid) {
        helper.fetchDataFromServer(component, event, helper);
    }

and if all components are valid then I will fetch the results.

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.