6

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..

1

2 Answers 2

9

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 :)

0
0

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);
}
1
  • 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
    Commented Oct 19, 2017 at 23:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .