Aura コンポーネント データの入力(2/2)

初めに

この項目 (Trailhead)は長くて難解のため記事を２つに分けております
第一弾はこちら

mankozooyork.hatenablog.com

Expenses.cmpコンポーネントからKickされるController

• 基本的には下記3つをやっているだけ
  1. 設定
  2. フォームの値を処理
  3. エラーがなければ処理を実行

({
    clickCreate: function(component, event, helper) {
        let validExpense = component.find('expenseform').reduce(
          function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
          }
        , true);
        // If we pass error checking, do some real work
        if(validExpense){
            // Create the new expense
            let newExpense = component.get("v.newExpense");
            console.log("Create expense: " + JSON.stringify(newExpense));
            helper.createExpense(component, newExpense);
        }
    }
})

解説

• component.find('auraId') は<lightning:input>項目の配列への参照を取得する.
  • もちろん引数にはaura:idを渡す。今回の例だとexpenseform.
  • 子コンポーネントにアクセスする方法がコントローラで必要であるときは、最初にそのコンポーネントのマークアップで aura:id を設定し、component.find(auraId) を使用して実行時にコンポーネントの参照を取得する.
  • component.find() では、コントローラーとヘルパーからコンポーネントとその子コンポーネントのみにアクセス可能.
• reduce()メソッドは、配列をvalidSofarで取得された単一値にする. この値は無効値が見つかるまでtrueのまま. 無効値とは、空の必須項目や指定された最小値未満の数値が含まれる値.（minやrequired属性に設定されたもの）
  • www.sejuku.net
• inputCmp.get('v.validity').validは配列内の現在の入力項目の有効性を返却する
• inputCmp.showHelpMessageIfInvalid();は無効な項目のエラーメッセージを表示する. formの<lightning:input/>の属性である下記などでメッセージをカスタマイズ可能.

messageWhenRangeUnderflow="Enter an amount that's at least $0.10."
messageWhenValueMissing="Did you forget me?"

• showHelpMessageIfInvalid()をcallするためには、各項目への参照が必要なため、component.get("v.newExpense")から取得した値からでは参照ができない.
• helper.createExpense(component, newExpense);は、ExpensesController.jsに関連するhelperをcallする.

フォームで入力されたExpenseレコードを保存する場所を作成する

• .cmpファイルの上部に配列を指定する.

   <aura:attribute name="expenses" type="Expense__c[]"/>

helper

({
    createExpense: function(component, expense) {
        // .cmpファイルに定義した空のexpenses配列を取得する
        let theExpenses = component.get("v.expenses");
        // Copy the expense to a new object
        // THIS IS A DISGUSTING, TEMPORARY HACK
        // helperに渡されたformのexpenseレコードを取得する
        let newExpense = JSON.parse(JSON.stringify(expense));
        // 配列に追加
        theExpenses.push(newExpense);
        // .cmpファイルに定義したexpensesにセット
        component.set("v.expenses", theExpenses);
    }
})

成果物

上記項は特にメモなし。とりあえず自分で動かしてみるのが吉。。

github.com