Components in the lightning namespace simplify input validation by providing attributes to define error conditions, enabling you to handle errors by checking the component’s validity state. For example, you can set a minimum length for a field , display an error message when the condition is not met, and handle the error based on the given validity state. For more information, see the lightning namespace components in the Component Reference.
Alternatively, input components in the ui namespace let you define and handle errors in a client-side controller, enabling you to iterate through a list of errors.
The following sections discuss error handling for ui:input* components.
The framework can handle and display errors using the default error component, ui:inputDefaultError. This component is dynamically created when you set the errors using the inputCmp.set("v.errors",[{message:"my error message"}]) syntax. The following example shows how you can handle a validation error and display an error message. Here is the markup.
<!--c:errorHandling--> <aura:component> Enter a number: <ui:inputNumber aura:id="inputCmp"/> <br/> <lightning:button label="Submit" onclick="{!c.doAction}"/> </aura:component>
Here is the client-side controller.
/*errorHandlingController.js*/ { doAction : function(component) { var inputCmp = component.find("inputCmp"); var value = inputCmp.get("v.value"); // Is input numeric? if (isNaN(value)) { // Set error inputCmp.set("v.errors", [{message:"Input not a number: " + value}]); } else { // Clear error inputCmp.set("v.errors", null); } } }
When you enter a value and click Submit, doAction in the controller validates the input and displays an error message if the input is not a number. Entering a valid input clears the error. Add error messages to the input component using the errors attribute.
ui:input and its child components can handle errors using the onError and onClearErrors events, which are wired to your custom error handlers defined in a controller. onError maps to a ui:validationError event, and onClearErrors maps to ui:clearErrors.
The following example shows how you can handle a validation error using custom error handlers and display the error message using the default error component. Here is the markup.
<!--c:errorHandlingCustom--> <aura:component> Enter a number: <ui:inputNumber aura:id="inputCmp" onError="{!c.handleError}" onClearErrors="{!c.handleClearError}"/> <br/> <ui:button label="Submit" press="{!c.doAction}"/> </aura:component>
Here is the client-side controller.
/*errorHandlingCustomController.js*/ { doAction : function(component, event) { var inputCmp = component.find("inputCmp"); var value = inputCmp.get("v.value"); // is input numeric? if (isNaN(value)) { inputCmp.set("v.errors", [{message:"Input not a number: " + value}]); } else { inputCmp.set("v.errors", null); } }, handleError: function(component, event){ /* do any custom error handling * logic desired here */ // get v.errors, which is an Object[] var errorsArr = event.getParam("errors"); for (var i = 0; i < errorsArr.length; i++) { console.log("error " + i + ": " + JSON.stringify(errorsArr[i])); } }, handleClearError: function(component, event) { /* do any custom error handling * logic desired here */ } }
When you enter a value and click Submit, doAction in the controller executes. However, instead of letting the framework handle the errors, we define a custom error handler using the onError event in <ui:inputNumber>. If the validation fails, doAction adds an error message using the errors attribute. This automatically fires the handleError custom error handler.
Similarly, you can customize clearing the errors by using the onClearErrors event. See the handleClearError handler in the controller for an example.