Lightning コンポーネント開発者ガイド
j項目の検証
デフォルトのエラー処理
フレームワークでは、デフォルトのエラーコンポーネント ui:inputDefaultError を使用して、エラーを処理および表示できます。次の例に、フレームワークで検証エラーを処理し、デフォルトのエラーコンポーネントを使用してエラーメッセージを表示する方法を示します。
コンポーネントのソース
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 Enter a number: <ui:inputNumber aura:id="inputCmp"/> <br/>
19 <ui:button label="Submit" press="{!c.doAction}"/>
20</aura:component>
21クライアント側コントローラのソース
1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
18 doAction : function(component) {
19 var inputCmp = component.find("inputCmp");
20 var value = inputCmp.get("v.value");
21
22 // Is input numeric?
23 if (isNaN(value)) {
24 // Set error
25 inputCmp.setValid("v.value", false);
26 inputCmp.addErrors("v.value", [{message:"Input not a number: " + value}]);
27 } else {
28 // Clear error
29 inputCmp.setValid("v.value", true);
30 }
31 }
32}
33値を入力して [送信] ボタンをクリックすると、コントローラのアクションによって入力値が検証され、入力値が数値でない場合にエラーメッセージが表示されます。有効な入力値を入力すると、エラーがクリアされます。コントローラでは、setValid(false) を使用して入力値を無効化し、setValid(true) を使用してエラーをクリアします。addErrors() を使用して、エラーメッセージを入力値に追加できます。
カスタムエラーの処理
ui:input およびその子コンポーネントは、onError および onClearErrors 属性を使用してエラーを処理できます。これらの属性は、コントローラで定義されたカスタムエラーハンドラに結び付けられています。onError は ui:validationError イベントに対応付けられ、onClearErrors は ui:clearErrors に対応付けられます。入力コンポーネントは、ui:updateError イベントを使用して、デフォルトのエラーコンポーネント ui:inputDefaultError を更新できます。
次の例に、カスタムエラーハンドラを使用して検証エラーを処理し、デフォルトのエラーコンポーネントを使用してエラーメッセージを表示する方法を示します。
コンポーネントのソース
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component>
18 Enter a number: <ui:inputNumber aura:id="inputCmp" onError="{!c.handleError}" onClearErrors="{!c.handleClearError}"/> <br/>
19 <ui:button label="Submit" press="{!c.doAction}"/>
20</aura:component>
21クライアント側コントローラのソース
1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
18 doAction : function(component, event) {
19 var inputCmp = component.find("inputCmp");
20 var value = inputCmp.get("v.value");
21
22 // is input numeric?
23 if (isNaN(value)) {
24 // fire event that will set error
25 var errorEvent = inputCmp.getEvent("onError");
26 errorEvent.setParams({ "errors" : [{message:"Input not a number: " + value}]});
27 errorEvent.fire();
28 } else {
29 // fire event that will clear error
30 var clearErrorEvent = inputCmp.getEvent("onClearErrors");
31 clearErrorEvent.fire();
32 }
33 },
34
35 handleError: function(component, event){
36 var inputCmp = component.find("inputCmp");
37 var errorsObj = event.getParam("errors");
38
39 /* do any custom error handling
40 * logic desired here */
41
42 // set error using default error component
43 inputCmp.setValid("v.value", false);
44 inputCmp.addErrors(errorsObj);
45 var updateErrorEvent = inputCmp.getEvent("updateError");
46 updateErrorEvent.fire();
47 },
48
49 handleClearError: function(component, event) {
50 var inputCmp = component.find("inputCmp");
51
52 /* do any custom error handling
53 * logic desired here */
54
55 // clear error using default error component
56 inputCmp.setValid("v.value", true);
57 var updateErrorEvent = inputCmp.getEvent("updateError");
58 updateErrorEvent.fire();
59 }
60}
61値を入力して [送信] ボタンをクリックすると、コントローラのアクションが実行されます。ただし、フレームワークにエラーを処理させるのではなく、コンポーネントの onError 属性を使用して、カスタムエラーハンドラを提供する必要があります。検証に失敗すると、doAction が setParams() を使用してエラーメッセージを追加し、カスタムエラーハンドラを起動します。カスタムイベントハンドラ handleError で、getParam() をコールしてエラーを取得し、setValid(false) を使用して入力値を無効化します。updateError イベントを起動して、デフォルトのエラーコンポーネントを更新できます。
同様に、onClearErrors イベントを使用して、エラーをクリアする方法をカスタマイズできます。例については、コントローラの handleClearError ハンドラを参照してください。