Lightning Components Basics: Input Data using Forms

Lightning Components Basics: Input Data using Forms

Campaign Header Component Code:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >

    <lightning:layout class="slds-page-header slds-page-header--object-home">

        <lightning:layoutItem>

            <lightning:icon iconName="action:goal" alternativeText="My Camping List"/>

        </lightning:layoutItem>

        <lightning:layoutItem padding="horizontal-small">

            <div class="page-section page-header">

                <h1 class="slds-text-heading--label">Campaign List</h1>

                <h2 class="slds-text-heading--medium">My Campaign List</h2>

            </div>

        </lightning:layoutItem>

    </lightning:layout>

</aura:component>

Campaign List Component Code:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >

<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 }"/>

    <!--<ol>

        <li>Bug Spray</li>

        <li>Bear Repellant</li>

        <li>Goat Food</li>

    </ol>  -->

    <!-- PAGE HEADER -->

    

    <c:campingHeader/>

    <lightning:layout>

        <lightning:layoutItem padding="around-small" size="6">

<div aria-labelledby="newcampaignform">

                <fieldset class="slds-box slds-theme--default slds-container--small">

    <legend id="newcampaignform" class="slds-text-heading--small slds-p-vertical--medium">

                    Add Campaign List

                    </legend> 

                    <form class="slds-form--stacked">

                        <lightning:input aura:id="campaignform" label="Campaign Item Name"

                         name="campaignitemname"

                         value="{!v.newItem.Name}"

                         required="true"/>

                        <lightning:input type="number" aura:id="expenseform" label="Quantity"

                         name="campaignitemprice"

                         min="1"

                         formatter="number"

                         step="0.1"

                         value="{!v.newItem.Quantity__c}"

                         messageWhenRangeUnderflow="Enter quantity that's at least 1."/>

<lightning:input type="number" aura:id="expenseform" label="Price"

                         name="campaignitemprice"

                         min="0.1"

                         formatter="currency"

                         step="0.01"

                         value="{!v.newItem.Price__c}"

                         messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>

<lightning:input type="checkbox" aura:id="expenseform" label="Packed?" 

                         name="expreimbursed"

                         checked="{!v.newItem.Packed__c}"/>

<lightning:button label="Create Camping" class="slds-m-top--medium"

                                 variant="brand" onclick="{!c.clickCreateItem}"/>

                    </form>

                </fieldset>

            </div>

            

</lightning:layoutItem>

    </lightning:layout>

    <c:campingHeader/>

<div class="slds-card slds-p-top--medium">

        <header class="slds-card__header">

            <h3 class="slds-text-heading--small">Items</h3>

        </header>

         

        <section class="slds-card__body">

            <div id="list" class="row">

                <aura:iteration items="{!v.items}" var="items">

                    <c:campingListItem item="{!item}"/>

                </aura:iteration>

            </div>

        </section>

    </div>

</aura:component>

Campaign List Controller Code

({

clickCreateItem: function(component, event, helper) {

        var validCamping = component.find('campingform').reduce(function (validSoFar, inputCmp) {

            // Displays error messages for invalid fields

            inputCmp.showHelpMessageIfInvalid();

            return validSoFar && inputCmp.get('v.validity').valid;

        }, true);

if(validCamping){

            var newCampingItem = component.get("v.newItem");

            var campings = component.get("v.items");

            var item = JSON.parse(JSON.stringify(newCampingItem));

            campings.push(item);

            component.set("v.items",campings);

            component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c','Name': '','Quantity__c': 0,

                                           'Price__c': 0,'Packed__c': false });

        }

}

})

Campaign List Item Code

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >

<aura:attribute name="item" type="Camping_Item__c" required="true"/>

<aura:attribute name="Name" type="String"/>

    <p>Hello! {!v.item.Name}</p>

<aura:attribute name="Price" type="String"/>

    <p>Price:

<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>

    </p>

    <aura:attribute name="Quantity" type="String"/>

    <p>Price:

<lightning:formattedNumber value="{!v.item.Quantity__c}" style="Number"/>

    </p>

    <aura:attribute name="Packed" type="String"/>

    <p>

        <lightning:input type="toggle"                           

                         label="Packed?"                          

                         name="Packed"                        

                         checked="{!v.item.Packed__c}" />

     </p>

    <div>

<lightning:button label="Packed!"

            onclick="{!c.packItem}"/>

    </div>

    

</aura:component>

Happy Coding !!!