4

I have enabled error messages (validation failed) for Lightning:input components inside my lightning component A using inputCmp.showHelpMessageIfInvalid()

I am trying to clear the Lightning:input error "messages" when I re-open the same lightning component A (show/hide using css). I Could clear Red colored border But couldn't clear error message below the text field. Please suggest how to clear default error message. inputCmp.set('v.messageWhenValueMissing', ''); is not working.

Error message as expected after validation

Want to clear this error message(reset input component)

clearValidationErrors : function(component, fieldSet) {
    for (var field in fieldSet) {
        if (fieldSet.hasOwnProperty(field)) {
            var inputCmp = component.find(field);
            if(inputCmp) {
                $A.util.removeClass(inputCmp, "slds-has-error");
                $A.util.addClass(inputCmp, "hide-error-message");
                //Clear Error Message (Ex: "Complete this field")
                //Trying to achieve something like below
                     //inputCmp.set("v.privateHelpMessage", ""); //But it is Private :(

            }
        }
    }
}

Thanks for your time..

6

we had a similar requirement and the way we fixed it was to put the entire form inside an aura:if and changed the Boolean condition. this essentially meant the dom got re-created again but we were able to reset 4 to 5 fields in one condition.

<aura:component >
    <aura:attribute name="truthy" default="true" type="boolean"/>
    <lightning:button label="Click Me" onclick="{!c.clickMe}" />
     <aura:if isTrue="{!v.truthy}">
    <lightning:input type="text" name="firstName" required="true" aura:id="firstName" label="First Name" value="{!v.firstName}" 
    messageWhenValueMissing="First name is required"/>
    </aura:if>     
</aura:component>

Helpercode:

compCreate:function(com,eve,helper){
   com.set('v.truthy',false);
      com.set('v.truthy',true);
}

We also did not have the need to touch each field this way instead controlled everything through an aura:if.Not the cleanest or most-efficient solution but till we get a reset function in lightning-input in the future we will use this :)

-1

Suggested approach doesn't work if you don't clear validity object first.

Example:

<aura:component >
  <aura:attribute name="isVisible" type="Boolean" default="true" />
  <aura:attribute name="field1" type="String" />
  <aura:attribute name="fieldsValidity" type="Object[]" />

  <aura:if isTrue={!v.isVisible}">
    <lightning:input name="textInput" value="{!v.field1}" 
                     validity="{!v.fieldsValidity.field1}" />
  </aura:if>

  <lightning:button label="Clear" onclick={!c.clearErrors} />
</aura:component>

JS:

clearErrors: function(cmp){
   cmp.set('v.fieldsValidity.field1', null);

   cmp.set('v.isVisible', false);
   cmp.set('v.isVisible', true);
}
  • Do we have access to update validity object now?? (We don't have access when I created this question) If so, you can do that by identifying component having aura:id and update validity object params. I wanted to clear all validation errors for all fields in form. suggestion that worked for me is - Render all input components again and also assign values again.. like refreshing whole form. This is not advisable if some one wants to clear validation errors for a input component in particular. – Sriram Oct 19 '17 at 23:17

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.