A ui:outputNumber component represents a number output that is rendered as an HTML span tag. This component can be used with ui:inputNumber, which takes in a number input. ui:outputNumber retrieves the locale information and displays the number in the given decimal format. To display a number, you can use an attribute value and bind it to the ui:outputNumber component.
<aura:attribute name="myNum" type="Decimal" default="10.10"/> <ui:outputNumber value="{!v.myNum}" format=".00"/>
The previous example renders the following HTML.
<span class="uiOutputNumber">10.10</span>
This example retrieves the value of a ui:intputNumber component, validates the input, and displays it using ui:outputNumber.
<aura:component> <ui:inputNumber aura:id="inputCmp" label="Enter a number: "/> <br/> <ui:button label="Submit" press="{!c.validate}"/> <ui:outputNumber aura:id="outNum" value=""/> </aura:component>
({ validate : function(component, evt) { var inputCmp = component.find("inputCmp"); var value = inputCmp.get("v.value"); var myOutput = component.find("outNum"); myOutput.set("v.value", value); // Check if input is numeric if (isNaN(value)) { inputCmp.set("v.errors", [{message:"Input not a number: " + value}]); } else { inputCmp.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. | |
format | String | The format of the number. For example, format=“.00” displays the number followed by two decimal places. If not specified, the Locale default format will be used. | |
value | BigDecimal | The number displayed when this component is rendered. | Yes |
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. |