• Sara Noordijk
  • NEWBIE
  • 0 Points
  • Member since 2017

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 2
    Questions
  • 0
    Replies
Hi,

I have made a fully working lightning application as described by the challenge but the trailhead challenge wont accept it:(
I have been stuck on this for a while, can anyone help me out?
The error is: The campingList component doesn't appear to have a Packed checkbox field in the form using a Lightning Base component.​
I clearly have the component however, and have searched the forum and found multiple people having the same issue.

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}"
                                         onchange="{!c.onChange}"/>                       
                    </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>

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 = component.get("v.newItem.Packed__c");
        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");
            itemObj.Packed__c = checkmarkValue;
             console.log("---itemObj---"+JSON.stringify(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,
                                 'Packed__c': false};
             //resetting the Values in the form
             component.set("v.newItem",newItemObj);
             alert('the items value provider has changed');
        }
    },
    onChange : function(component, event, helper) {
               
        var packedBool = component.get("v.newItem.Packed__c");
        console.log('packedBool1 =', packedBool);
        if(packedBool === false){
            packedBool = true;
        } else {
            packedBool = false;
        }
        console.log('packedBool2 =', packedBool);
        component.set('v.newItem.Packed__c',packedBool);
        }
})
Hi,

I have made a fully working lightning application but the challenge wont accept it:(
Can anyone help me out?
The error is: The campingList component doesn't appear to have a Packed checkbox field in the form using a Lightning Base component.​
I clearly have the component however, and have searched the forum and found multiple people having the same issue.

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}"
                                         onchange="{!c.onChange}"/>                       
                    </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>


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 = component.get("v.newItem.Packed__c");
        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");
            itemObj.Packed__c = checkmarkValue;
             console.log("---itemObj---"+JSON.stringify(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,
                                 'Packed__c': false};
             //resetting the Values in the form
             component.set("v.newItem",newItemObj);
             alert('the items value provider has changed');
        }
    },
    onChange : function(component, event, helper) {
               
        var packedBool = component.get("v.newItem.Packed__c");
        console.log('packedBool1 =', packedBool);
        if(packedBool === false){
            packedBool = true;
        } else {
            packedBool = false;
        }
        console.log('packedBool2 =', packedBool);
        component.set('v.newItem.Packed__c',packedBool);
        }
})