Aura コンポーネントの基本⇒フォームを使用したデータの入力

campingListApp.app

<aura:application extends="force:slds">
    <c:campingList/>
</aura:application>

campingList.cmp

<aura:component>
     <aura:attribute name="items" type="Camping_Item__c[]"/>
     <aura:attribute name="newItem" type="Camping_Item__c"
         default="{ 'sobjectType': 'Camping_Item__c',
                        'Name': '',
                        'Quantity__c': 0,
                        'Price__c': 0,
                        'Packed__c': false }"/>
    <!-- PAGE HEADER -->
    <c:campingHeader/>
    <!-- / PAGE HEADER -->

    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
        <!-- CREATE NEW ITEM -->
        <div aria-labelledby="newitemform">
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
            <legend id="newitemform" class="slds-text-heading--small 
              slds-p-vertical--medium">
              Add Item
            </legend>

            <!-- CREATE NEW ITEM FORM -->
            <form class="slds-form--stacked">          
                <lightning:input aura:id="itemform" label="Item Name"
                                 name="itemname"
                                 value="{!v.newItem.Name}"
                                 required="true"
                                 messageWhenValueMissing="Did you forget me?"/> 
                <lightning:input type="number" aura:id="itemform" label="Quantity"
                                 name="itemquantity"
                                 min="1"
                                 value="{!v.newItem.Quantity__c}"
                                 messageWhenRangeUnderflow="Enter an quantity that's at least 1."/>
                <lightning:input type="number" aura:id="itemform" label="Price"
                                 name="itemprice"
                                 min="0.01"
                                 formatter="currency"
                                 step="0.001"
                                 value="{!v.newItem.Price__c}"
                                 messageWhenRangeUnderflow="Enter an price that's at least $0.01."/>
                <lightning:input type="checkbox" aura:id="itemform" label="Packed?"  
                                 name="itempacked"
                                 checked="{!v.newItem.Packed__c}"/>
                <lightning:button label="Create Item" 
                                  class="slds-m-top--medium"
                                  variant="brand"
                                  onclick="{!c.clickCreateItem}"/>
            </form>
            <!-- / CREATE NEW ITEM FORM -->

          </fieldset>
          <!-- / BOXED AREA -->
        </div>
        <!-- / CREATE NEW ITEM -->
        </lightning:layoutItem>
    </lightning:layout>

    <lightning:card title="Items">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.items}" var="item">
                <c:campingListItem item="{!item}"/>
            </aura:iteration>
        </p>
    </lightning:card>
</aura:component>

campingListController.js

({
    clickCreateItem: function(component, event, helper) {
        var validItem = component.find('itemform').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(validItem){
            // Create the new item
            var newItem = JSON.parse(JSON.stringify(component.get("v.newItem")));
            var theItems = component.get("v.items");
            theItems.push(newItem);
            component.set("v.items", theItems);
            component.set("v.newItem",{'sobjectType':'Camping_Item__c',
                    'Name': '',
                    'Quantity__c': 0,
                    'Price__c': 0,
                    'Packed__c': false});
        }
    }
})

campingHeader.cmp

<aura:component >
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="action:goal" alternativeText="My Items"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1>Camping List</h1>
                <h2 class="slds-text-heading--medium">My Items</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>    
</aura:component>

campingListItem.cmp

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>
        Name: {!v.item.Name}
    </p>
    <p>
        Quantity: {!v.item.Quantity__c}
    </p>
    <p>
        Price: <lightning:formattedNumber style="currency" value="{!v.item.Price__c}"/>
    </p>
    <p>
        Packed: {!v.item.Packed__c}
    </p>
    <p>
        <lightning:input type="toggle"
                         checked="{!v.item.Packed__c}"
                         name="packed"
                         label="Packed?"/>
    </p>
    <lightning:button label="Packed!" onclick="{!c.packItem}"/>
</aura:component>

campingListItemController.js

({
    packItem : function(component, event, helper) {
        var btn = event.getSource();
        btn.set("v.disabled", true);
        component.set("v.item.Packed__c", true);
    }
})