Lightning コンポーネント開発者ガイド
j項目の検証
デフォルトのエラー処理
フレームワークでは、デフォルトのエラーコンポーネント ui:inputDefaultError を使用して、エラーを処理および表示できます。次の例に、フレームワークで検証エラーを処理し、デフォルトのエラーコンポーネントを使用してエラーメッセージを表示する方法を示します。これがそのマークアップです。
1<!--docsample:errorHandling-->
2<aura:component>
3 Enter a number: <ui:inputNumber aura:id="inputCmp"/> <br/>
4 <ui:button label="Submit" press="{!c.doAction}"/>
5</aura:component>これはクライアント側コントローラです。
1/*errorHandlingController.js*/
2{
3 doAction : function(component) {
4 var inputCmp = component.find("inputCmp");
5 var value = inputCmp.get("v.value");
6
7 // Is input numeric?
8 if (isNaN(value)) {
9 // Set error
10 inputCmp.set("v.errors", [{message:"Input not a number: " + value}]);
11 } else {
12 // Clear error
13 inputCmp.set("v.errors", null);
14 }
15 }
16}値を入力して [送信] をクリックすると、コントローラの doAction アクションによって入力値が検証され、入力値が数値でない場合はエラーメッセージが表示されます。有効な入力値を入力すると、エラーがクリアされます。errors 属性を使用して、エラーメッセージを入力コンポーネントに追加します。
カスタムエラーの処理
ui:input およびその子コンポーネントは、onError および onClearErrors イベントを使用してエラーを処理できます。これらのイベントは、コントローラで定義されたカスタムエラーハンドラに結び付けられています。onError は ui:validationError イベントに対応付けられ、onClearErrors は ui:clearErrors に対応付けられます。
次の例に、カスタムエラーハンドラを使用して検証エラーを処理し、デフォルトのエラーコンポーネントを使用してエラーメッセージを表示する方法を示します。これがそのマークアップです。
1<!--docsample:errorHandlingCustom-->
2<aura:component>
3 Enter a number: <ui:inputNumber aura:id="inputCmp" onError="{!c.handleError}" onClearErrors="{!c.handleClearError}"/> <br/>
4 <ui:button label="Submit" press="{!c.doAction}"/>
5</aura:component>これはクライアント側コントローラです。
1/*errorHandlingCustomController.js*/
2{
3 doAction : function(component, event) {
4 var inputCmp = component.find("inputCmp");
5 var value = inputCmp.get("v.value");
6
7 // is input numeric?
8 if (isNaN(value)) {
9 inputCmp.set("v.errors", [{message:"Input not a number: " + value}]);
10 } else {
11 inputCmp.set("v.errors", null);
12 }
13 },
14
15 handleError: function(component, event){
16 /* do any custom error handling
17 * logic desired here */
18 },
19
20 handleClearError: function(component, event) {
21 /* do any custom error handling
22 * logic desired here */
23 }
24}値を入力して [送信] をクリックすると、コントローラの doAction アクションが実行されます。ただし、フレームワークにエラーを処理させるのではなく、<ui:inputNumber> の onError イベントを使用するカスタムエラーハンドラを定義します。検証に失敗すると、doAction が errors attribute を使用してエラーメッセージを追加します。これにより、handleError カスタムエラーハンドラが自動的に起動します。
同様に、onClearErrors イベントを使用して、エラーをクリアする方法をカスタマイズできます。例については、コントローラの handleClearError ハンドラを参照してください。