+ Start a Discussion
Lorenzo Faccio 12Lorenzo Faccio 12 

Lightning Experience: Input Data Using Forms. Problems with challenge

Hello, 

I'm having an issue with this challenge. I'm getting the following error: 

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

My campingList component contains the following code:

<!-- CREATE NEW ITEM FORM -->
        <form class="slds-form--stacked">          
            <lightning:input aura:id="itemform" label="Item Name"
                             name="Name"
                             value="{!v.newItem.Name}"
                             required="true"/> 
            
            <lightning:input aura:id="itemform" label="Quantity"
                             name="Quantity"
                             value="{!v.newItem.Quantity__c}"
                             min="1"
                             type="decimal"/> 
            
            <lightning:input aura:id="itemform" label="Price"
                             name="Price"
                             value="{!v.newItem.Price__c}"
                             formatter="currency"
                            /> 
            
           
            <div class="slds-form-element">
                        <lightning:input aura:id="itemform" label="Packed"
                             name="Packed"
                             value="{!v.newItem.Packed__c}"
                             type="checkbox" 
                             />
                    </div>
            <lightning:button label="Create Item" 
                              class="slds-m-top--medium"
                              variant="brand"
                              onclick="{!c.clickCreateItem}"/>
        </form>
        <!-- / CREATE NEW ITEM FORM -->

Apparently the challenge is able to find the inputs for Price and Quantity but doesn't see the Package one.

Anybody else had the same problem? Is it an issue in my code?

Thanks
Best Answer chosen by Lorenzo Faccio 12
Ender Reinoso SalazarEnder Reinoso Salazar
Hi, the problem is that property "value" for checkbox is not correct, you must use checked, the part of the code is:

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

All Answers

Ender Reinoso SalazarEnder Reinoso Salazar
Hi, the problem is that property "value" for checkbox is not correct, you must use checked, the part of the code is:

<div class="slds-form-element"> 
              <div class="slds-form-element__control">
                       <lightning:input type="checkbox" label="Packed" 
                                       class="slds-checkbox"
                                       checked="{!v.newItem.Packed__c}" 
                                     aura:id="camppacked" />
              </div>
          </div>
This was selected as the best answer
Lorenzo Faccio 12Lorenzo Faccio 12
It worked,  thanks a lot!!
Ender Reinoso SalazarEnder Reinoso Salazar
Did you finish the challenge? I have problems with the campingListController
Lorenzo Faccio 12Lorenzo Faccio 12
I managed to finish the challenge. The code I wrote for the controller is:
({
    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(validItem){
    
            // Create the new item
            var newItem = component.get("v.newItem");
            console.log("Create item: " + JSON.stringify(newItem));
            var allItems = component.get("v.items");
            allItems.push(newItem);
            component.set("v.items",allItems);
            
            newItem = { 'sobjectType': 'Camping_Item__c', 'Quantity__c': 0, 'Price__c': 0 };
            component.set("v.newItem",newItem);
        }
    }

})
Ender Reinoso SalazarEnder Reinoso Salazar
Thanks Lorenzo, it worked perfectly
Abhishek sh 29Abhishek sh 29
1)Camping Application:
      <aura:application extends="force:slds">
        <c:campingList/>
     </aura:application>​
2)CampingHeader Component:
  <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>
3)CampingLIst Component:
<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>
4)CampingLIst Controller:
({
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 });
}
}
})

5)CampingLIstItem Component:
<aura:component  implements="force:appHostable">

    <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>
Madhumitha M 3Madhumitha M 3
Thank u Abhishek it working perfectly.