ui:inputDefaultError | Lightning Components Developer’s 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 addErrors(). You can use the default error handling by setting the input value to false and adding 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.setValue("v.value", false);
6        inputCmp.addErrors("v.value", [{message:"Input not a number: " + value}]);
7    } else {
8        //clear error
9        inputCmp.setValid("v.value", true);
10    }
11}

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>

1swfobject.registerObject("clippy.codeblock-5", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    checkInput : function(cmp, evt) {
19    	var colorCmp = cmp.find("color");
20        var myColor = colorCmp.get("v.value");
21        var myOutput = cmp.find("outColor");
22        var greet = "You entered: " + myColor;
23        myOutput.set("v.value", greet);
24
25        if (!myColor) {
26            colorCmp.setValid("v.value", false);
27            colorCmp.addErrors("v.value", [{message:"Enter some text"}]);
28        }
29        else {
30            //clear error
31            if(!colorCmp.isValid("v.value")){
32                colorCmp.setValid("v.value", true);
33            }
34        }
35    }
36})

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 error messages to be displayed.

Events

Event Name	Event Type	Description
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`click`	COMPONENT	Indicates that a component has been clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.