+ Start a Discussion
Ruben HalmanRuben Halman 

TH: Input Data Using Forms: Checkmark

Hi,

I do not understand why, but for some reason my Checkmark Input is not getting retrieved correctly.
It is always FALSE when creating a newItem, even when I put it to true.

I have been stuck on this for a while and hoping for some help!

THE COMPONENT:
<aura:component >
    <aura:attribute name="newItem" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Quantity__c': '0',
                    'Price__c': 0,
                    'Packed__c':false}"/>

    <aura:attribute name="items" type="Camping_Item__c[]"/>

    <div class="slds-col slds-col--padded slds-p-top--large">
        <div aria-labelledby="newItemform">
            <fieldset class="slds-box slds-theme--default slds-container--small">
                <legend id="newexpenseform" class="slds-text-heading--small slds-p-vertical--medium">
                    Add Camping Item
                </legend>

                <form class="slds-form--stacked">
                    <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <lightning:input name="expname" label="Camping Item Name"
                                             class="slds-input slds-form-element__label"
                                             value="{!v.newItem.Name}" aura:id="expname"
                                             required="true"/>
                        </div>
                    </div>

                    <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <lightning:input type="number" label="Quantity" maxlength="10" min="1"
                                             name="quantity" class="slds-input slds-form-element__label"
                                             value="{!v.newItem.Quantity__c}" aura:id="quantity"
                                             required="true"/>
                        </div>
                    </div>

                    <div class="slds-form-element">
                        <div class="slds-form-element__control">
                            <lightning:input type="number" name="price" label="Price" formatter="currency" step="0.01" 
                                             class="slds-input slds-form-element__label"
                                             value="{!v.newItem.Price__c}" aura:id="price"
                                             />
                        </div>
                    </div>

                    <div class="slds-form-element">
                        <lightning:input type="checkbox" name="packed" label="Packed"
                                         class="slds-checkbox slds-form-element__label"
                                         aura:id="packed"
                                         value="{!v.newItem.Packed__c}"/>
                    </div>

                    <div class="slds-form-element">
                        <lightning:button label="Create Expense"
                                          class="slds-button slds-button--brand"
                                          onclick="{!c.clickCreateItem}"/>
                    </div>
                </form>
            </fieldset>
        </div>
    </div>
    <section class ="slds-card__body">
        <div id="list" class = "row">
            <aura:iteration items="{!v.items}" var="item">
                <c:campingListItem item="{!item}"/>
            </aura:iteration>
        </div>
    </section>
</aura:component>
THE CONTROLLER:
({
    clickCreateItem: function(component, event, helper) {
        // Simplistic error checking
        var validCamp = true;
        // get Value from expname input
        var textField = component.find("expname");
        console.log("--textField--"+textField);
        var textValue = textField.get("v.value");
        console.log('textValue = '+textValue);

        // get Value from quantity input
        var quantityField = component.find("quantity");
        console.log("--quantityField--"+quantityField);
        var quantityValue = quantityField.get("v.value");
        console.log('quantityValue = '+quantityValue);

        // get Value from price input
        var priceField = component.find("price");
        console.log("--priceField--"+priceField);
        var priceValue = priceField.get("v.value");
        console.log('priceValue = '+priceValue);

        // get Value from checkMark
        var checkmarkField = component.find("packed");
        console.log("--checkmarkField--"+checkmarkField);
        var checkmarkValue = checkmarkField.get("v.value");
        console.log('checkmarkValue = '+checkmarkValue);


        // //TEST INPUT
        if ($A.util.isEmpty(textValue)){
            validCamp = false;
            textField.set("v.errors", [{message:"Camping Item name can't be blank."}]);
        }
        else {
            textField.set("v.errors", null);
        }
       
        if (validCamp == true && quantityValue < 1){
            validCamp = false;
            quantityField.set("v.errors", [{message:"Camping Item's quantity should be greater or equal 1."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
        priceField.set("v.errors", null);
        checkmarkField.set("v.errors", null);
        //
        // //LOGIC
        //
        if(validCamp){
        //
             var itemObj = component.get("v.newItem");
             console.log("---itemObj---"+itemObj);
             console.log("Create camping item : " + JSON.stringify(itemObj));
             var theItems = component.get("v.items");
        
             // Copy the expense to a new object
        
             var newItem = JSON.parse(JSON.stringify(itemObj));
             //var newItem = itemObj;
             console.log("Expenses before 'create': " + JSON.stringify(theItems));
             theItems.push(newItem);
             component.set("v.items", theItems);
             console.log("Expenses after 'create': " + JSON.stringify(theItems));
             var newItemObj = {'sobjectType': 'Camping_Item__c',
                 'Name': '',
                 'Quantity__c': 0,
                 'Price__c': 0 };
             //resetting the Values in the form
             component.set("v.newItem",newItemObj);
             alert('the items value provider has changed');
        }
    }
})
Ruben HalmanRuben Halman
These are my console results showing the checkmark is not copied to newItem:


components/c/campingList.js:32 --checkmarkField--SecureComponentRef: markup://lightning:input {77:0} {packed}{ key: {"namespace":"c"} }
components/c/campingList.js:34 checkmarkValue = false
components/c/campingList.js:61 ---itemObj---[object Object]
components/c/campingList.js:62 Create camping item : {"sobjectType":"Camping_Item__c","Name":"test","Quantity__c":"1","Price__c":"01","Packed__c":false}
components/c/campingList.js:69 Expenses before 'create': []
components/c/campingList.js:72 Expenses after 'create': [{"sobjectType":"Camping_Item__c","Name":"test","Quantity__c":"1","Price__c":"01","Packed__c":false}]