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.
<aura:component> Enter a number: <ui:inputNumber aura:id="inputCmp" label="number"/> <ui:button label="Submit" press="{!c.doAction}"/> </aura:component>
This client-side controller displays an error if the input is not a number.
doAction : function(component, event) { var inputCmp = cmp.find("inputCmp"); var value = inputCmp.get("v.value"); if (isNaN(value)) { inputCmp.set("v.errors", [{message:"Input not a number: " + value}]); } else { //clear error inputCmp.set("v.errors", null); } }
Alternatively, you can provide your own ui:inputDefaultError component. This example returns an error message if the warnings attribute contains any messages.
<aura:component> <aura:attribute name="warnings" type="String[]" description="Warnings for input text"/> Enter a number: <ui:inputNumber aura:id="inputCmp" label="number"/> <ui:button label="Submit" press="{!c.doAction}"/> <ui:inputDefaultError aura:id="number" value="{!v.warnings}" /> </aura:component>
This client-side controller diplays an error by adding a string to the warnings attribute.
doAction : function(component, event) { var inputCmp = component.find("inputCmp"); var value = inputCmp.get("v.value"); // is input numeric? if (isNaN(value)) { component.set("v.warnings", "Input is not a number"); } else { // clear error component.set("v.warnings", null); } }
This example shows a ui:inputText component with the default error handling, and a corresponding ui:outputText component for text rendering.
<aura:component> <ui:inputText aura:id="color" label="Enter some text: " placeholder="Blue" /> <ui:button label="Validate" press="{!c.checkInput}" /> <ui:outputText aura:id="outColor" value="" class="text"/> </aura:component>
({ checkInput : function(cmp) { var colorCmp = cmp.find("color"); var myColor = colorCmp.get("v.value"); var myOutput = cmp.find("outColor"); var greet = "You entered: " + myColor; myOutput.set("v.value", greet); if (!myColor) { colorCmp.set("v.errors", [{message:"Enter some text"}]); } else { colorCmp.set("v.errors", null); } } })
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
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. |
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. |