ui:inputDefaultError

The default implementation of field-level errors, which iterates over the value and displays the message.

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=""/>
</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);
        }
    }
})

Attributes

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.

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.