ui:inputDefaultError | Lightning コンポーネント開発者ガイド

ui:inputDefaultError は、入力コンポーネントのデフォルトのエラー処理です。このコンポーネントは、エラーのリストとして項目の下に表示されます。項目レベルのエラーメッセージは、set("v.errors") を使用して追加できます。エラー属性を使用して、エラーメッセージを表示できます。たとえば、次のコンポーネントは、入力が数値であるかどうかを検証します。

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>

次のクライアント側のコントローラは、入力が数値でない場合にエラーを表示します。

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}

または、独自の ui:inputDefaultError コンポーネントを指定することもできます。次の例は、warnings 属性にメッセージが含まれている場合にエラーメッセージを返します。

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>

次のクライアント側のコントローラは、warnings 属性に文字列を追加することによってエラーを表示します。

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}

次の例に、デフォルトのエラー処理をする ui:inputText コンポーネントと、テキストを表示するための対応する ui:outputText コンポーネントを示します。

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})

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`value`	ArrayList	表示するエラー文字列のリスト。

イベント

イベント名	イベントタイプ	説明
`dblclick`	COMPONENT	コンポーネントがダブルクリックされたことを示します。
`mouseover`	COMPONENT	ユーザがマウスポインタをコンポーネントに移動したことを示します。
`mouseout`	COMPONENT	ユーザがマウスポインタをコンポーネントから移動したことを示します。
`mouseup`	COMPONENT	ユーザがマウスボタンを放したことを示します。
`mousemove`	COMPONENT	ユーザがマウスポインタを移動したことを示します。
`click`	COMPONENT	コンポーネントがクリックされたことを示します。
`mousedown`	COMPONENT	ユーザがマウスキーを押したことを示します。