+ Start a Discussion
Nelson Young 4Nelson Young 4 

Challenge Not yet complete... here's what's wrong: The campingList component doesn't appear to have a Quantity input field in the form using a Lightning Base component.

Re-factored my code from previous units with base lightning components, but receiving this error.  Here's my new form component.  Any help would be much appreciated.

<aura:component >   
    <aura:attribute name="newItem" type="Camping_Item__c"    default="{ 'sobjectType': 'Camping_Item__c',
                         'Name': '',
                         'Price__c': 0,
                         'Quantity__c': 0,                         
                         'Packed__c': false
                       }"/>
 
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    <lightning:layout >
        <lightning:layoutItem padding="around-small" size="6">
<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 Camping Item
    </legend>

    <!-- CREATE NEW CAMPING ITEM FORM -->
    <form class="slds-form--stacked">          
        <lightning:input aura:id="itemForm" label="Camping Item Name"
                         name="Name"
                         value="{!v.newItem.Name}"
                         required="true"/> 
        <lightning:input type="number" aura:id="itemForm" label="Quantity"
                         name="Quantity"
                         maxlength="16"
                         min="0"
                         step="1"
                         value="{!v.newItem.Quantity__c}"
                         required="true"/>
        <lightning:input type="number" aura:id="itemForm" label="Price"
                         name="Price"
                         min="0"
                         step=".01"
                         value="{!v.newItem.Price__c}"
                         formatter="currency"
                         messageWhenRangeUnderflow="Enter an amount that's at least .01."/>
        <lightning:input type="checkbox" aura:id="itemForm" label="Packed?"  
                         name="Packed"
                         checked="{!v.newItem.Packed__c}"/>
        <lightning:button label="Create Expense" 
                          class="slds-m-top--medium"
                          variant="brand"
                          onclick="{!c.clickCreateItem}"/>
    </form>
  </fieldset>
  <!-- / BOXED AREA -->

</div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>
Nelson Young 4Nelson Young 4
Sorry, forgot to include the link to the unit.

https://trailhead.salesforce.com/trails/lex_dev/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_events
Wade Lovell 21Wade Lovell 21
I see some excellent work here and I appreciate how much work you've put into this. I ran your code and received the same error message. I don't see the specific issue yet.
It would help in reading it to eliminate the various "Expense" items where you have pulled the code from the samples in the Module, e.g. <lightning:button label="Create Expense".
In the future, it might also help to name the specific challenge you are facing which, I believe in this case, is the "Connect Components with Events" Challenge.
While I work toward a direct answer to your question, I believe you may want to use <lightning:formattedNumber style="currency" for the price. 
 
Wade Lovell 21Wade Lovell 21
Hi Nelson,
You inspired me to go ahead and complete this challenge. My code is different but I am getting the same error:
"Challenge Not yet complete... here's what's wrong: The campingList component doesn't appear to have a Quantity input field in the form using a Lightning Base component." Below is the relevant portion of my campingList.cmp file:
    <!-- CREATE NEW CAMPING ITEM FORM -->
    <form class="slds-form--stacked">          
        <lightning:input type="text"
                         label="Camping Item Name"
                         name="Name"
                         value="{!v.newItem.Name}"
                         required="true"/> 
        <lightning:input type="number" 
                         label="Quantity"
                         name="Quantity"
                         value="{!v.newItem.Quantity__c}"
                         required="true"/>
        <lightning:formattedNumber style="currency" 
                         value="{!v.newItem.Price__c}"/>
        <lightning:input type="checkbox" 
                         label="Packed?"  
                         name="Packed"
                         checked="{!v.newItem.Packed__c}"/>
        <lightning:button variant="brand"
                         label="Create Camping Item" 
                         class="slds-m-top--medium"
                         onclick="{!c.clickCreateItem}"/>
    </form>
    <!-- / NEW CAMPING ITEM FORM -->
Keep me updated if anyone comes up with a great solution. I think I'll try a formatted number for Quantity...
Thanks in advance,
Wade
Wade Lovell 21Wade Lovell 21
Hi,
I'll save you the trouble of trying <lightning:formatted with the default value of decimal. I get the same error.
Thanks,
Wade
Nelson Young 4Nelson Young 4
Thanks for taking a look Wade.  I think I'm going to restart the modules.  Started this in the old UI:*, maybe have to refactor controllers/helpers to match the changes to the previous modules.
Wade Lovell 21Wade Lovell 21
My pleasure. I have some time this evening so I will do the same and we can compare notes. Send me a connection request on Linkedin https://www.linkedin.com/in/wadelovell. 
Sean BarkerSean Barker
Hi Both,  I've also had fun and games on this trailhead.  I had the old UI elements like yourself Nelson which I then updated to the lightning inputs.  I believe that the issues were to do with the form validation. 

So on the campingform, my quantity input was <lightning:input type="number" aura:id="itemForm" name="Quantity" min="1" messageWhenRangeUnderflow="Enter an amount that's at least 1" label="Quantity" value="{!v.newItem.Quantity__c}" required="true" />

The validateItemForm function was updated to

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);
return(validItem);

(As per one of the earlier trailheads on Lightning forms, but wasn't required for that particular trailhead!).
Mark Tyler CrawfordMark Tyler Crawford
Same issue as everyone else. Has this one been resolved with Salesforce support yet? Below is my relevant code:
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="Number"/>
    </p>
    <p>Packed:
        <lightning:input type="toggle" label="Packed?" checked="{!v.item.Packed__c}"/>
    </p>
    <div>
        <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>
</aura:component>

 
Carlos SiqueiraCarlos Siqueira
I just posted on the Trailhead community asking @Jeff Douglas for help.
https://success.salesforce.com/_ui/core/chatter/groups/GroupProfilePage?g=0F9300000009Nek
Sean BarkerSean Barker
Hi Mark, when I went through this, the issue wasn't so much with the form, but the validation.  One thing to check though,   <aura:attribute name="item" type="Camping_Item__c" required="true"/>  may need to be
<aura:attribute name="newItem" type="Camping_Item__c"
     default="{ 'sobjectType': 'Camping_Item__c',
              	'Name' : '',
                    'Quantity__c': 0,
                    'Price__c': 0
                     }" required="true"/>

 
Mark Tyler CrawfordMark Tyler Crawford
Sean, 

I made the change you suggested and I am still getting the "Challenge Not yet complete... here's what's wrong: 
The campingList component doesn't appear to have a Quantity input field in the form using a Lightning Base component." error...

Thanks
Sean BarkerSean Barker
Hmm, no Aura:id on each of the elements, what code are you using for validation?
Mark Tyler CrawfordMark Tyler Crawford
Below is the code that I am using.

CampingList.cmp
<aura:component controller="CampingListController">
	
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <aura:handler name="addItem" event="c:addItemEvent"
   	action="{!c.handleAddItem }"/>
    

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

    
       <!-- NEW ITEM FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">

        <c:campingListForm />

    </div>
    <!-- / NEW ITEM FORM -->    
   

    <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>

campingListController.js
({
    // Load items from Salesforce
	doInit: function(component, event, helper) {

    // Create the action
    var action = component.get("c.getItems");

    // Add callback behavior for when response is received
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            component.set("v.items", response.getReturnValue());
        }
        else {
            console.log("Failed with state: " + state);
        }
    });

    // Send action off to be executed
    $A.enqueueAction(action);
},

    
    handleAddItem: function(component, event, helper) {
    //   var newItem = event.getParam("item");
    //helper.addItem(component, newItem);
    var action = component.get("c.saveItem");
    		action.setParams({"item": newItem});
    		action.setCallback(this, function(response){
        		var state = response.getState();
        		if (component.isValid() && state === "SUCCESS") {
            		// all good, nothing to do.
            var items = component.get("v.items");
            items.push(response.getReturnValue());
            component.set("v.items", items);
        		}
    		});
    		$A.enqueueAction(action);
        		}
    
              
})

campingListHelper.js
({
   addItem: function(component, item) {
    this.saveItem(component, item, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            // all good, nothing to do.
         /*   var items = component.get("v.items");
            items.push(response.getReturnValue());
            component.set("v.items", items);*/
        }
    });
},
})

campingListItem.cmp
<aura:component >
    <aura:attribute name="newItem" type="Camping_Item__c"
     default="{ 'sobjectType': 'Camping_Item__c',
              	'Name' : '',
                    'Quantity__c': 0,
                    'Price__c': 0
                     }" required="true"/>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>Quantity:
        <ui:inputNumber value="{!v.item.Quantity__c}" />
    </p>
    <p>Packed:
        <lightning:input type="toggle" label="Packed?" checked="{!v.item.Packed__c}"/>
    </p>
    <div>
        <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>
</aura:component>

campingListItemController.js
({
	packItem : function(component, event, helper) {
        //get the object first
        var a = component.get("v.item", true);
        
        //make changes to the object
        a.Packed__c=true;
        
        component.set("v.item", a);  
        
        var btn = event.getSource();
		btn.set("v.disabled",true);
	}
})

campingListFrom.cmp
<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:registerEvent name="addItem" type="c:addItemEvent"/>
        <!-- CREATE NEW ITEM FORM -->
    <form class="slds-form--stacked">

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

          </div>
     </div>

     <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control">
              <p>Quantity:
                  <lightning:formattedNumber value="{!v.item.Quantity__C}" style="number"/>
                 
              </p>
          </div>
      </div>

      <div class="slds-form-element">
          <div class="slds-form-element__control">
              <lightning:input aura:id="price" label="Price"
                  class="slds-input"
                  
                  value="{!v.newItem.Price__c}"
                  />
          </div>
      </div>

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

      <div class="slds-form-element">
          <ui:button label="Create Camping Item"
              class="slds-button slds-button--brand"
              press="{!c.submitForm}"/>
      </div>

    </form>
    <!-- / CREATE NEW ITEM FORM -->
</aura:component>
campinListFormController.js
({
    
    submitForm: function(component, event, helper) {    
    if(helper.validateItemForm(component)){
        // Create the new item
        var newItem = component.get("v.newItem");
        helper.createItem(component, newItem);
    }
        
        }

})

campinListFormHelper.js
({
 addItem: function(component, newItem) {
    var addItem = component.getItem("addItem");
    addItem.setParams({ "item": item });
    addItem.fire();
            component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Quantity__c': 0,
                    'Price__c': 0,
                    'Packed__c': false } />);
},
    

		validateItemForm: function(component) {
		
              // Simplistic error checking
        var validItem = true;

        // Name must not be blank
        var nameField = component.find("itemname");
        var itemname = nameField.get("v.value");
        if ($A.util.isEmpty(itemname)){
            validItem = false;
            nameField.set("v.errors", [{message:"Item name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }
        
        // Quantity must not be blank
        var quantityField = component.find("quantity");
        var quantity = nameField.get("v.value");
        if ($A.util.isEmpty(quantity)){
            validItem = false;
            quantityField.set("v.errors", [{message:"Quantity can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
		// Price must not be blank
        var priceField = component.find("price");
        var price = priceField.get("v.value");
        if ($A.util.isEmpty(price)){
            validItem = false;
            priceField.set("v.errors", [{message:"Price can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
            return (validItem);

	}
})

 
Sean BarkerSean Barker
Think you have the same issue I had before, take a look at the previous trailhead, refactoring the lightning inputs to all have the same AuraID and reworking the validateItemForm.  to similar as the example for expenses in the previous trailhead.    (My question raised when I was stuck may give you some pointers.  https://developer.salesforce.com/forums/ForumsMain?id=9060G000000MRBoQAO)
YaasiinYaasiin
<lightning:input aura:id="itemform" name="Quantity" label="Quantity" value="{!v.newItem.Quantity__c}" 
                    type="number" required="true" min="1" messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>


1.Replace the <lightning:input> tag for Quantity field with above tag.

2.And use same aura:id value for all the inputs.

3.And also use the following code for Valiadtion.

validateItemForm: function(component) {
		
		var validExpense = component.find('itemform').reduce(function (validSoFar, inputCmp) {
						inputCmp.showHelpMessageIfInvalid();
						return validSoFar && inputCmp.get('v.validity').valid;
					}, true);

		return validExpense;
}
Craig SuthersCraig Suthers
I just ran into the same issue. I resolved it by setting a min value of 1 (or not 0).
 
<lightning:input type="number" aura:id="campinglistitemform" label="Quantity"
                             name="itemquantity"
                             min="1"
                             step="1"
                             value="{!v.newItem.Quantity__c}"
                             placeholder="0"/>

Yaaslin's answer above fixes the issue, but it wasn't clear why that solved it. Turns the evaluation of the challenge is expecting a minimum quanity.
Alo Sen 25Alo Sen 25
Thanks Craig and Yaasiin.
Alexey KardychkoAlexey Kardychko
Hope, it will helpful for somebody. Make sure you have the same markup for  form:
User-added image
 
Jason MarshallJason Marshall
Hello all, I'm at my wits end!! I can't get past the form part of the challange and get the below error. My Issue is to do with the Packed Input field. I have tried a varriant of difference combinations to no avail.

Challenge Not yet complete... here's what's wrong: 
The campingList component doesn't appear to have a Packed checkbox field in the form using a Lightning Base component.


Any help would be greatly appreciated.
<form class="slds-form--stacked">
      		<lightning:input type="text" aura:id="newItemForm" label="Name"
                             name="Name"
                             value="{!v.newItem.Name}"
                             required="true"/> 
            <lightning:input type="number" aura:id="newItemForm" label="Price"
                             name="Price"
                             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 aura:id="newItemForm" label="Packed"  
                             name="Packed" type="checkbox" 
                             checked="{!v.newItem.Packed}" value="{!v.newItem.Packed}"
                             />
      		<lightning:input type="number" aura:id="newItemForm" label="Quantity"
                             name="Quantity"
                             min="1"
                             step="1"
                             value="{!v.newItem.Quantity__c}"
                             placeholder="0"/>
    </form>

 
Alexey KardychkoAlexey Kardychko
Jason Marshall, try change
...
checked="{!v.newItem.Packed}" value="{!v.newItem.Packed}"

to
checked="{!v.newItem.Packed__c}" value="{!v.newItem.Packed__c}"

 
Jason MarshallJason Marshall
Thank you so much, I must have been up far to late with tied eyes.

Cheers it worked :)
Priya SubbaramanPriya Subbaraman
Thank you, Alexey Kardychko! Your solution helped me too.  I had the same problem on Packed checkbox.
Siva Anand 28Siva Anand 28
Jason,

Try the following code instead of creation the newItem afresh. Though your code also works.

      var newItem = component.find("newItem");
      var itemValue = newItem.get("v.default");
       component.set("v.newItem", itemValue);

Thanks
Siva
NanduNandu
Challenge not yet complete... here's what's wrong:
The campingList component doesn't appear to have a Name input field in the form using a Lightning Base component.

<form class="slds-form--stacked">
                    <lightning:input type="text" aura:id="newItemForm" label="Name"
                                     name="Name"
                                     value="{!v.newItem.Name}"
                                     required="true"/> 
                    <lightning:input type="number" aura:id="newItemForm" label="Price"
                                     name="Price"
                                     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 aura:id="newItemForm" label="Packed"  
                                     name="Packed" type="checkbox" 
                                     checked="{!v.newItem.Packed__C}" value="{!v.newItem.Packed__C}"
                                     />
                    <lightning:input type="number" aura:id="newItemForm" label="Quantity"
                                     name="Quantity"
                                     min="1"
                                     step="1"
                                     value="{!v.newItem.Quantity__c}"
                                     placeholder="0"/>
                </form>
dheeraj g 10dheeraj g 10
srinivas vanaparthi..remove type="text" and try
NanduNandu
Dheeraj
it's not working .same error


 <form class="slds-form--stacked">
                    <lightning:input aura:id="newItemForm" label="Name"
                                     name="Name"
                                     value="{!v.newItem.Name}"
                                     required="true"/> 

                    <lightning:input type="number" aura:id="newItemForm" label="Price"
                                     name="Price"
                                     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 aura:id="newItemForm" label="Packed"  
                                     name="Packed" type="checkbox" 
                                     checked="{!v.newItem.Packed__C}" value="{!v.newItem.Packed__C}"
                                     />
                    <lightning:input type="number" aura:id="newItemForm" label="Quantity"
                                     name="Quantity"
                                     min="1"
                                     step="1"
                                     value="{!v.newItem.Quantity__c}"
                                     placeholder="0"/>
                </form>
dheeraj g 10dheeraj g 10
The following code worked for me....Sreenivas..could you try using this code..

<aura:component >
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    <!-- CREATE NEW ITEM FORM -->
    <form class="slds-form--stacked">

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

          </div>
     </div>

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

          </div>
      </div>

      <div class="slds-form-element">
          <div class="slds-form-element__control">
              <lightning:input  aura:id="price" label="Price" Formatter="currency"
                  value="{!v.newItem.Price__c}"
                  />
          </div>
      </div>

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

      <div class="slds-form-element">
          <lightning:input label="Create Camping Item"
              class="slds-button slds-button--brand"
              onclick="{!c.clickCreateItem}"/>
      </div>

    </form>
    <!-- / CREATE NEW ITEM FORM -->
</aura:component>
Debabrata BeraDebabrata Bera
Below code worked for me...Hope it will work for you also

campingListForm.cmp

<aura:component >
    
    <aura:attribute name="newItem" type="Camping_Item__c"
                    default="{ 'sobjectType': 'Camping_Item__c',
                             'Name': '',
                             'Packed__c': false,
                             'Price__c': '0',
                             'Quantity__c': '0' }"/>
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    
    <div aria-labelledby="newitemform">
        <fieldset class="slds-box slds-theme--default slds-container--small">
            
            <legend id="newitemform" 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 aura:id="name" label="Camping Item Name"
                                         labelClass="slds-form-element__label"
                                         value="{!v.newItem.Name}"
                                         required="true"/>
                    </div>
                </div>
                
                <div class="slds-form-element">
                    <lightning:input type="checkbox"
                         label="Packed?"  
                         name="Packed"
                         checked="{!v.newItem.Packed__c}"/>
                </div>
                
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <lightning:input aura:id="price" label="Price"
                                         formatter="currency"
                                         labelClass="slds-form-element__label"
                                         value="{!v.newItem.Price__c}" />
                        
                    </div>
                </div>
                
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <lightning:input type="number" aura:id="quantity" label="Quantity"
                                         class="slds-input"
                                         min="1"
                                         labelClass="slds-form-element__label"
                                         value="{!v.newItem.Quantity__c}"/>
                        
                    </div>
                </div>
                
                <div class="slds-form-element">
                    <lightning:button aura:id="submit" type="submit"
                                      label="Create Camping Item"
                                      onClick="{!c.clickCreateItem }"/>
                </div>
                
            </form>
            
        </fieldset>
    </div>
    
</aura:component>

Please let me know if you are facing any error with this code.
 
Robert_StrunkRobert_Strunk
@Craig Suthers Thanks, your answer resolved my issue.
Cansu Asli AsciCansu Asli Asci
Thank you @Alexey Kardychko !
Your form screenshot helped me a lot! I kept bumping into the same problems for Quantity and Price but with your form example I could get through
ParidhiBindalParidhiBindal
Hello everyone - following code will help you to fix all the issues. Enjoy !!

CampingList.cmp

 
<aura:component >
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c" default="{'Name':'',
                                                                   'Quantity__c':0,
                                                                   'Price__c':0,
                                                                   'Packed__c':false,
                                                                   'sobjectType':'Camping_Item__c'}"/>
    
    <!-- NEW Campaing FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">
        
        
        <c:campingHeader />
        
        <div aria-labelledby="newCampaingForm">
            
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
                
                <legend id="newCampaingForm" class="slds-text-heading--small 
                                                   slds-p-vertical--medium">
                    Add Expense
                </legend>
                
                <!-- CREATE NEW Campaing FORM -->
                <form class="slds-form--stacked">
                    
                    <!-- For Name Field -->
        <lightning:input aura:id="expenseform" label="Camping Name"
                         name="expensename"
                         value="{!v.newItem.Name}"
                         required="true"/>
        <!-- For Quantity Field -->
        <lightning:input type="number" aura:id="campingform" label="Quantity"
                         name="expenseamount"
                         min="1"
                         value="{!v.newItem.Quantity__c}"
                         messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
         <!-- For Price Field -->
        <lightning:input aura:id="campingform" label="Price"
                         formatter="currency"
                         name="expenseclient"
                         value="{!v.newItem.Price__c}"
                          />
         <!-- For Check Box -->
        <lightning:input type="checkbox" aura:id="campingform" 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>
                <!-- / CREATE NEW EXPENSE FORM -->
                
            </fieldset>
            <!-- / BOXED AREA -->
            
        </div>
        <!-- / CREATE NEW EXPENSE -->
    </div>
    
    <!-- ITERATIING ITEM LISTS -->
    <div class="slds-card slds-p-top--medium">
        
        <c:campingHeader />
        
        <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>
    </div>    
    <!-- / ITERATIING ITEM LISTS -->
</aura:component>
campingHeader.cmp
<aura:component >
  <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem >
            <lightning:icon iconName="action:goal" alternativeText="My Camping"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Camping</h1>
                <h2 class="slds-text-heading--medium">My Camping</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

campingListItem.cmp
 
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c"/>
    
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed:
        <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
</aura:component>

campingListController.js
 
({
    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");
            //helper.createCamping(component,newCampingItem);
            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 });
        }
    }
})



 
jk lightningjk lightning
Make sure both checked and value attribute is added to the checkbox input.

 <lightning:input type="checkbox" aura:id="campForm" label="Packed?"
                             name="packed"
                             checked="{!v.newItem.Packed__c}"
                             value="{!v.newItem.Packed__c}"/>
Silambarasan VeluSilambarasan Velu
@Alexey Kardychko screen shot above worked for me. Thank you Alex.
Sarah J DSarah J D
Hi Nelson,

Kindly find the below code which I used to clear this module.  Hope it helps! :)

campingList.cmp:

<aura:component controller="CampingListController">
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <aura:handler name="addItem" event="c:addItemEvent"
       action="{!c.handleAddItem }"/>
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <div class="slds-col slds-col--padded slds-p-top--large">

        <c:campingListForm />

    </div>
    <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 newItem="{!items}"/>
                </aura:iteration>
            </div>
        </section>
    </div>

</aura:component>

campingListController.js:

({
    doInit: function(component, event, helper) {
    var action = component.get("c.getItems");
    action.setCallback(this, function(response) {
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
            component.set("v.items", response.getReturnValue());
        }
        else {
            console.log("Failed with state: " + state);
        }
    });
    $A.enqueueAction(action);
},

    
    handleAddItem: function(component, event, helper) {
    var action = component.get("c.saveItem");
            action.setParams({"item": newItem});
            action.setCallback(this, function(response){
                var state = response.getState();
                if (component.isValid() && state === "SUCCESS") {
                    // all good, nothing to do.
            var items = component.get("v.items");
            items.push(response.getReturnValue());
            component.set("v.items", items);
                }
            });
            $A.enqueueAction(action);
                }
})

campingListHelper.js:

({
   addItem: function(component, item) {
    this.saveItem(component, item, function(response){
        var state = response.getState();
        if (component.isValid() && state === "SUCCESS") {
        }
    });
},
})

campingListForm.cmp:

<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:registerEvent name="addItem" type="c:addItemEvent"/>
    <form class="slds-form--stacked">
        
        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">
                <lightning:input aura:id="itemname" label="Name"
                                 class="slds-input"
                                 
                                 value="{!v.newItem.Name}"
                                 required="true"/>
                
            </div>
        </div>
        
        <div class="slds-form-element slds-is-required">
            <div class="slds-form-element__control">
                <p>Quantity:<lightning:input aura:id="itemform" name="Quantity" label="Quantity" value="{!v.newItem.Quantity__c}" 
                                             type="number" required="true" min="1" messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
                </p>
            </div>
        </div>
        
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <lightning:input aura:id="price" label="Price"
                                 class="slds-input"
                                 formatter="currency"
                                 value="{!v.newItem.Price__c}"
                                 />
            </div>
        </div>
        
        <div class="slds-form-element">
            <lightning:input aura:id="packed" label="Packed?"
                             class="slds-checkbox"
                             type="checkbox"
                             checked="{!v.newItem.Packed__c}" 
                             value="{!v.newItem.Packed__c}"/>
        </div>
        
        <div class="slds-form-element">
            <lightning:button label="Submit" 
                       class="slds-button slds-button--brand"
                       onclick="{!c.clickCreateItem}"/>
        </div>
        
    </form>
</aura:component>

campingListController.js:

({
    
    clickCreateItem : function(component, event, helper) {    
    if(helper.validateItemForm(component)){
        // Create the new item
        var newItem = component.get("v.newItem");
        helper.createItem(component, newItem);
    }
        },
    
    validateItemForm: function(component) {
        var validExpense = component.find('itemform').reduce(function (validSoFar, inputCmp) {
                        inputCmp.showHelpMessageIfInvalid();
                        return validSoFar && inputCmp.get('v.validity').valid;
                    }, true);

        return validExpense;
}
})

campingListFormHelper.js:

({
 addItem: function(component, newItem) {
    var addItem = component.getItem("addItem");
    addItem.setParams({ "item": item });
    addItem.fire();
            component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Quantity__c': 0,
                    'Price__c': 0,
                    'Packed__c': false });
},
    

        validateItemForm: function(component) {
        var validItem = true;

        var nameField = component.find("itemname");
        var itemname = nameField.get("v.value");
        if ($A.util.isEmpty(itemname)){
            validItem = false;
            nameField.set("v.errors", [{message:"Item name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }
        
        var quantityField = component.find("quantity");
        var quantity = nameField.get("v.value");
        if ($A.util.isEmpty(quantity)){
            validItem = false;
            quantityField.set("v.errors", [{message:"Quantity can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
        var priceField = component.find("price");
        var price = priceField.get("v.value");
        if ($A.util.isEmpty(price)){
            validItem = false;
            priceField.set("v.errors", [{message:"Price can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
            return (validItem);
    }
})

campingListItem.cmp:

<aura:component >
    <aura:attribute name="newItem" type="Camping_Item__c"
     default="{ 'sobjectType': 'Camping_Item__c',
                  'Name' : '',
                    'Quantity__c': 0,
                    'Price__c': 0
                     }" required="true"/>
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>Quantity:<lightning:input aura:id="itemform" name="Quantity" label="Quantity" value="{!v.newItem.Quantity__c}" 
                    type="number" required="true" min="1" messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
    </p>
    <p>Packed:
        <lightning:input type="toggle" label="Packed?" checked="{!v.item.Packed__c}"/>
    </p>
    <div>
        <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>
</aura:component>

campingListItemController.js:

({
    packItem : function(component, event, helper) {
        var a = component.get("v.item", true);
        a.Packed__c=true;
        component.set("v.item", a); 
        var btn = event.getSource();
        btn.set("v.disabled",true);
    },
    
    validateItemForm: function(component) {
        var validExpense = component.find('itemform').reduce(function (validSoFar, inputCmp) {
                        inputCmp.showHelpMessageIfInvalid();
                        return validSoFar && inputCmp.get('v.validity').valid;
                    }, true);
        return validExpense;
}
})

addItemEvent.evt:

<aura:event type="COMPONENT">
    <aura:attribute name="item" type="Camping_Item__c"/>
</aura:event>

Happy Coding! :)
Rahul Kumar DeyRahul Kumar Dey
Hi guys recently I complete this unit---
Here is the complete code for this challenge(Please follow step by step) and if you find any difficualty to understand please let me know:

campingHeader.cmp
<aura:component >
    <h1 class="slds-page-header">
        <lightning:layout>
            <lightning:layoutItem>
                <lightning:icon iconName="action:goal" alternativeText="Record Form"/>
            </lightning:layoutItem>
            <lightning:layoutItem padding="horizontal-small">
                <div class="page-section page-header">
                    <h1 class="slds-text-heading--label">Camping</h1>
                    <h2 class="slds-text-heading--medium">My Camping</h2>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </h1>
</aura:component>

campingListItem.cmp
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c"/>
 
    Name:
    <ui:outputText value="{!v.item.Name}"/><br></br>
 
    Price:
    <ui:outputCurrency value="{!v.item.Price__c}"/><br></br>
 
    Quantity:
    <ui:outputNumber value="{!v.item.Quantity__c}"/><br></br>
 
    Packed:
    <ui:outputCheckbox value="{!v.item.Packed__c}"/> 
</aura:component>

campingListItemController.js
({
    packItem : function(component, event, helper) {
        var markItem=component.get("v.item",true);
        markItem.Packed__c=true;
        component.set("v.item",markItem);
        var btnClick=event.getSource();//Button
        //var btnMessage=btnClick.get("v.label");//Button's label
        //component.set("v.item.Packed__c",true);
        btnClick.set("v.disabled",true);
    }
})

campingList.cmp
<aura:component >
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c" required="true"
                    default="{ 'sobjectType': 'Camping_Item__c',
                             'Name': '',
                             'Quantity__c': '0',
                             'Price__c': 0,
                             'Packed__c': false }"/>
    
    <lightning:card title="Add Camping Item" iconName="action:goal">
    
        <!-- CampingItem form -->
       <!-- <lightning:layout>
            <lightning:layoutItem padding="slds-m-around-medium">-->
                <!-- Form Stating... -->
                <form class="slds-m-around_medium">
                    <lightning:input aura:id="campingform" label="Name" name="name" value="{!v.newItem.Name}" required="true"/>
                    <lightning:input type="number" aura:id="campingform" label="Quantity" name="quantity" value="{!v.newItem.Quantity__c}" required="true" min="1" messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
                    <lightning:input aura:id="campingform" label="Price" name="price" value="{!v.newItem.Price__c}" formatter="currency"/>
                    <br></br>
                    <lightning:input type="checkbox" aura:id="campingform" label="Packed" name="packed" checked="{!v.newItem.Packed__c}"/>
                    <br></br>
                    <lightning:button label="Submit" variant="brand" onclick="{!c.clickCreateItem}"/>
                </form>
                <!-- Form Ending... -->
           <!-- </lightning:layoutItem>
        </lightning:layout>    -->
        <!-- CampingItem form -->
        
    </lightning:card>
    
    
    <!-- ITERATIING ITEM LISTS -->
    <div class="slds-card slds-p-top--medium">
        
        <c:campingHeader/>
        
        <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>
    </div>    
    <!-- / ITERATIING ITEM LISTS -->
</aura:component>

campingListController.js
({
    clickCreateItem : function(component, event, helper) {
        var validCamping=component.find('campingform').reduce(function(validSoFar,inputCmp){
            //Display error message if any error occure
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get("v.validity").valid;
        },true);
        //If no error occure
        if(validCamping){
            //Creating Camping
            var newItem=component.get("v.newItem");
            console.log("Create Camping@@@"+JSON.stringify(newItem));
            
            //Add all camping to the list(array type)
            var theItems=component.get("v.items");
            var camping=JSON.parse(JSON.stringify(newItem));
            console.log("Camping before pushing to list:"+JSON.stringify(theItems));
            theItems.push(camping);
            console.log("Camping after pushing to list:"+JSON.stringify(theItems));
            
            component.set("v.items",theItems);//sets the value of item(attribute) to list of camping_item
            component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                                       'Name': '','Quantity__c': 0,
                                       'Price__c': 0,'Packed__c': false });
            
        }
    }
})

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


Ok now few things you can check, after snipped this code you can open debug log and check how data will populate in list

Cheers!!


Thanks,
Rahul
Rahul Kumar DeyRahul Kumar Dey
Here is the screen short

See the output in this screenshot 
Gajendra ChoudharyGajendra Choudhary
campingListForm.cmp---->>

<aura:component >
   
    <aura:attribute name="newItem" type="Camping_Item__c"
     default="{ 'sobjectType': 'Camping_Item__c',
                  'Name' : '',
                    'Quantity__c': 0,
                    'Price__c': 0
                     }" required="true"/>
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    
  <div aria-labelledby="newitemform">
      <fieldset class="slds-box slds-theme--default slds-container--small">
    
        <legend id="newitemform" 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 aura:id="name" label="Camping Item Name"
                      class="slds-input"
                      labelClass="slds-form-element__label"
                      value="{!v.newItem.Name}"
                      required="true"/>
              </div>
         </div>
            
          <div class="slds-form-element">
              <lightning:input type="checkbox" aura:id="itemForm" label="Packed?"  
                         name="Packed"
                         checked="{!v.newItem.Packed__c}"/>
          </div>
            
        <div class="slds-form-element">
              <div class="slds-form-element__control">
                   <lightning:input type="number" aura:id="itemForm" label="Price"
                         name="Price"
                         min="0"
                         step=".01"
                         value="{!v.newItem.Price__c}"
                         formatter="currency"
                         messageWhenRangeUnderflow="Enter an amount that's at least .01."/>
    
              </div>
          </div>
    
         <div class="slds-form-element">
              <div class="slds-form-element__control">
                                      
         <lightning:input type="number" aura:id="itemForm" 
                          name="Quantity" min="1" 
                          messageWhenRangeUnderflow="Enter an amount that's at least 1" 
                          label="Quantity" value="{!v.newItem.Quantity__c}"
                          required="true" />
    
              </div>
          </div>
    
          <div class="slds-form-element">
               <lightning:button label="Create Expense" 
                          class="slds-m-top--medium"
                          variant="brand"
                          onclick="{!c.clickCreateItem}"/>
 
          </div>
    
        </form>
    
      </fieldset>
</div>

</aura:component>

campingListFormController.js---->>>>
({    
    
    submitForm : function(component, event, helper) {
        
        var validCamping = true;
        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);
            return(validItem);
        // Name must not be blank
        var nameField = component.find("name");
        var expname = nameField.get("v.value");
        if ($A.util.isEmpty(expname)){
            validCamping = false;
            nameField.set("v.errors", [{message:"Camping Item name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }

        
        var priceField = component.find("price");
        var price = priceField.get("v.value");
        if ($A.util.isEmpty(price) || isNaN(price) || (price <= 0.0)){
            validCamping = false;
            priceField.set("v.errors", [{message:"Camping Item price can't be blank."}]);
        }
        else {
            priceField.set("v.errors", null);
        }
        
        var quantityField = component.find("quantity");
        var quantity = quantityField.get("v.value");
        if ($A.util.isEmpty(quantity) || isNaN(quantity) || (quantity <= 0)){
            validCamping = false;
            quantityField.set("v.errors", [{message:"Camping Item quantity can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }

        if(validCamping){
            
            helper.createItem(component);
            
        }
        
    },
})

Regards,
Gajendra