Lightning コンポーネント開発者ガイド
j項目の検証
- lightning:input
- lightning:select
- lightning:textarea
- ui:input*
lightning 名前空間のコンポーネントでは、エラー条件を定義する属性が提供されて入力規則が簡素化されるため、コンポーネントの有効性の状態を確認してエラーを処理できるようになります。たとえば、項目の最小の長さを設定し、条件が満たされないときにエラーメッセージを表示して、特定の有効性の状態に基づいてエラーを処理できます。詳細は、「コンポーネントの参照」の lightning 名前空間コンポーネントに関する内容を参照してください。
または、ui 名前空間の入力コンポーネントでは、クライアント側コントローラでエラーの定義と処理を行い、エラーのリスト内を反復処理できます。
次のセクションでは、ui:input* コンポーネントのエラー処理について説明します。
デフォルトのエラー処理
フレームワークでは、デフォルトのエラーコンポーネント ui:inputDefaultError を使用して、エラーを処理および表示できます。このコンポーネントは、inputCmp.set("v.errors",[{message:"my error message"}]) 構文を使用してエラーを設定するときに動的に作成されます。次の例で、検証エラーを処理してエラーメッセージを表示する方法を示します。これがそのマークアップです。
1<!--c:errorHandling-->
2<aura:component>
3 Enter a number: <ui:inputNumber aura:id="inputCmp"/> <br/>
4 <lightning:button label="Submit" onclick="{!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<!--c: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 // get v.errors, which is an Object[]
19 var errorsArr = event.getParam("errors");
20 for (var i = 0; i < errorsArr.length; i++) {
21 console.log("error " + i + ": " + JSON.stringify(errorsArr[i]));
22 }
23 },
24
25 handleClearError: function(component, event) {
26 /* do any custom error handling
27 * logic desired here */
28 }
29}値を入力して [送信] をクリックすると、コントローラの doAction アクションが実行されます。ただし、フレームワークにエラーを処理させるのではなく、<ui:inputNumber> の onError イベントを使用するカスタムエラーハンドラを定義します。検証に失敗すると、doAction が errors attribute を使用してエラーメッセージを追加します。これにより、handleError カスタムエラーハンドラが自動的に起動します。
同様に、onClearErrors イベントを使用して、エラーをクリアする方法をカスタマイズできます。例については、コントローラの handleClearError ハンドラを参照してください。