ステップバイステップでLightningコンポーネントを楽しもう！ - モジュール7


# データを登録してみよう

クライアント側で入力チェックを行い、問題なければApexをコールしLeadを登録します。

## 画面イメージ

<img src="https://qiita-image-store.s3.amazonaws.com/0/86505/f562f019-a578-fcba-31ce-f22dd448905e.png" width="50%"/>

## ソース

### Apex
モジュール6のApexクラス(LeadController.cls)にメソッドを追加します。

```java:LeadController.cls
    @AuraEnabled
    public static Lead create(Lead ld) {
        insert ld;
        return ld;
    }
```

### Component
```xml:m07_Validation.cmp
<aura:component controller="LeadController" implements="force:appHostable">

    <h3>リード登録</h3>

    <aura:attribute name="lead" type="Lead" default="{ 'sobjectType': 'Lead', 'LastName': '', 'Company': '' }"/>

    <form>
        <ui:inputText aura:id="company" label="会社名" value="{!v.lead.Company}" required="true"/>
        <ui:inputText aura:id="lastname" label="姓" value="{!v.lead.LastName}" required="true"/>
        <ui:button label="登録" press="{!c.createLead}"/>
    </form>

</aura:component>
```

```javascript:m07_ValidationController.js
({
    createLead: function(component, event, helper) {

        var isValid = true;
        var company = component.find("company");
        var lastName = component.find("lastname");

        // エラークリア
        company.setValid("v.value", true);
        lastName.setValid("v.value", true);

        if ($A.util.isEmpty(company.get("v.value"))) {
            // エラーセット
            company.setValid("v.value", false);
            company.addErrors("v.value", [{message:"会社名を入力してください。"}]);
            isValid = false;
        }
        if ($A.util.isEmpty(lastName.get("v.value"))) {
            // エラーセット
            lastName.setValid("v.value", false);
            lastName.addErrors("v.value", [{message:"姓を入力してください。"}]);
            isValid = false;
        }

        if (isValid) {
            var lead = component.get("v.lead");
            var action = component.get("c.create");
            action.setParams({
                "ld": lead
            });

            action.setCallback(this, function(a){
                // Salesforce1イベント発火（トーストメッセージ表示）
                var toastEvent = $A.get("e.force:showToast");
                if (action.getState() === 'SUCCESS') {
                    toastEvent.setParams({
                        "title": "Success",
                        "message": "正常に登録が完了しました"
                    });
                    company.set("v.value", "");
                    lastName.set("v.value", "");
                } else {
                    toastEvent.setParams({
                        "title": "Error",
                        "message": "エラーが発生しました"
                    });
                }
                toastEvent.fire();
            });

            $A.enqueueAction(action);
        }
    },
})
```

## ポイント

### 入力コンポーネント
さまざまな入力イベントがサポートされ、ユーザインターフェースイベントのイベント処理が簡略化されます。

### 項目の検証
デフォルトのエラーコンポーネント（ui:inputDefaultError）を使用してエラーメッセージを利用しています。
setValid(true)でエラークリアします。

### Salesforce1イベント

```
e.force:showToast
```

トーストメッセージを表示するSalesforce1イベントの発火を行います。

### Auraオブジェクトのユーティリティ

```
$A.util.isEmpty
```

## 補足

* P86 入力コンポーネントの概要
* P167 項目の検証
* P135 Salesforce1イベント
* P156 JavaScriptでの属性値の操作、$A.util.isEmpty

---

:arrow_backward: [モジュール6へ](http://qiita.com/UmekitaForce/private/81734b74809ab876754c "モジュール6") | [モジュール8へ](http://qiita.com/UmekitaForce/private/049b9fbd0ad82617ad32 "モジュール8") :arrow_forward: