ui:inputDefaultError | Lightning Components Developer Guide

ui:inputDefaultError is the default error handling for your input components. This component displays as a list of errors below the field. Field-level error messages can be added using set("v.errors"). You can use the error atribute to show the error message. For example, this component validates if the input is a number.

1<aura:component>
2    Enter a number: <ui:inputNumber aura:id="inputCmp" label="number"/>
3    <ui:button label="Submit" press="{!c.doAction}"/>
4</aura:component>

This client-side controller displays an error if the input is not a number.

1doAction : function(component, event) {
2    var inputCmp = cmp.find("inputCmp");
3    var value = inputCmp.get("v.value");
4    if (isNaN(value)) {
5        inputCmp.set("v.errors", [{message:"Input not a number: " + value}]);
6    } else {
7        //clear error
8        inputCmp.set("v.errors", null);
9    }
10}

Alternatively, you can provide your own ui:inputDefaultError component. This example returns an error message if the warnings attribute contains any messages.

1<aura:component>
2      <aura:attribute name="warnings" type="String[]" description="Warnings for input text"/>
3    Enter a number: <ui:inputNumber aura:id="inputCmp" label="number"/>
4    <ui:button label="Submit" press="{!c.doAction}"/>
5    <ui:inputDefaultError aura:id="number" value="{!v.warnings}" />
6</aura:component>

This client-side controller diplays an error by adding a string to the warnings attribute.

1doAction : function(component, event) {
2    var inputCmp = component.find("inputCmp");
3    var value = inputCmp.get("v.value");
4
5    // is input numeric?
6    if (isNaN(value)) {
7       component.set("v.warnings", "Input is not a number");
8    } else {
9       // clear error
10       component.set("v.warnings", null);
11    }
12}

This example shows a ui:inputText component with the default error handling, and a corresponding ui:outputText component for text rendering.

1<aura:component>
2 <ui:inputText aura:id="color" label="Enter some text: " placeholder="Blue" />
3 <ui:button label="Validate" press="{!c.checkInput}" /> 
4 <ui:outputText aura:id="outColor" value="" class="text"/>
5</aura:component>

1({
2    checkInput : function(cmp) {
3    	var colorCmp = cmp.find("color");
4        var myColor = colorCmp.get("v.value");
5
6        var myOutput = cmp.find("outColor");
7        var greet = "You entered: " + myColor;
8        myOutput.set("v.value", greet);
9
10        if (!myColor) {
11            colorCmp.set("v.errors", [{message:"Enter some text"}]);
12        }
13        else {
14            colorCmp.set("v.errors", null);
15        }
16    }
17})

Attributes

Attribute Name	Attribute Type	Description
`body`	Component[]	The body of the component. In markup, this is everything in the body of the tag.
`class`	String	A CSS style to be attached to the component. This style is added in addition to base styles output by the component.
`value`	String[]	The list of errors strings to be displayed.

Events

Event Name	Event Type	Description
`dblclick`	COMPONENT	The event fired when the user double-clicks the component.
`mouseover`	COMPONENT	The event fired when the user moves the mouse pointer over the component.
`mouseout`	COMPONENT	The event fired when the user moves the mouse pointer away from the component.
`mouseup`	COMPONENT	The event fired when the user releases the mouse button over the component.
`mousemove`	COMPONENT	The event fired when the user moves the mouse pointer over the component.
`click`	COMPONENT	The event fired when the user clicks on the component.
`mousedown`	COMPONENT	The event fired when the user clicks a mouse button over the component.