[SalesForce] Lightning:Input – Hide (Reset) Field Level Error message Enabled by using showHelpMessageIfInvalid()

Have few Lightning:Input and Lightning:Select components in My Component A.
All the fields are having Required attribute as 'true'.
Once fields are validated, Field level error (help) messages appear at the bottom of the field and will be there until input Field data is changed (is valid). I have used showHelpMessageIfInvalid() to enable this error message on field explicitly from controller.

I would like to Reset(Hide) the error messages on all these fields from Controller.
Is there any way to do this?
Looks like "errors" is not a valid attribute for Lightning:Input / Lightning:Select components. Below attempt failed.

component.find('FieldAuraID').set('v.errors', null);

Thanks

Best Answer

If you really wanted to hide error messages you could do something like this:

Component:

<div>
    <lightning:input label="First Name" aura:id="firstName" required="true"/>
    <lightning:button onclick="{!c.hideErrors}">Hide Errors</lightning:button>
</div>

Controller:

hideErrors : function(component, event, helper) {
    var el = component.find("firstName");
    $A.util.removeClass(el, "slds-has-error"); // remove red border
    $A.util.addClass(el, "hide-error-message"); // hide error message
}

Style:

~~.THIS .hide-error-message > .slds-form-element__help {~~

.THIS .hide-error-message > .slds-form-element > .slds-form-element__help {
    display: none;
}

But the internal DOM structure and class names of base components are subject to change so this isn't a totally robust solution.

Related Solutions

[SalesForce] Elegant initialization of Lightning aura:attribute

In Winter '15, it seems that all fields that will be data-bound need to be explicitly initialized in the default attribute. In situations where I don't want to go through the hassle of explicitly defining every single field, I've adopted a pattern of using an Apex controller method to return a new instance of the desired object that has default values filled in.

@AuraEnabled
public static Contact newContact() {
    return (Contact)Contact.sObjectType.newSObject(null, true);
}

With this method defined, I use an init handler to invoke the Apex controller method, and then store the result in the desired variable. Below is a helper function definition that I call from the init handler.

initThisContact : function(component) {
    var self = this;  // safe reference

    // Create an action to invoke the Apex controller method
    // which will return a new Contact record
    var initAction = component.get("c.newContact");
    initAction.setCallback(self, function(a) {
        component.set("v.thisContact", a.getReturnValue());
    });

    // Enqueue the action
    $A.enqueueAction(initAction);
}

This approach is not as efficient as being able to simply initialize a new object via the default attribute, since it requires a round-trip Ajax request to Salesforce. I hope in the future there will be a more efficient way to initialize sObject attributes in Lightning.

[SalesForce] Displaying error message besides the field responsible for occurrence of error from Apex code

There are many available strategies. Probably the simplest is to use the required attribute:

<apex:inputText value="{!Contact.LastName}" required="true" />

The advantage there is that you do not require any Apex at all. It also works with inputText, whereas other strategies depend on using inputField.

Another option is to make the field required at the database level or use a Validation Rule:

ISBLANK(LastName)

Again, no Apex.

If you want to add an error to a specific field in Apex, you can as follows:

contactRecord.LastName.addError('error message');

Note that this functionality cannot be achieved dynamically.

Best Answer

Related Solutions

[SalesForce] Elegant initialization of Lightning aura:attribute

[SalesForce] Displaying error message besides the field responsible for occurrence of error from Apex code

Related Topic