You need to sign in to do that
Don't have an account?
Lorenzo 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
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
<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
<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>
({
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);
}
}
})
<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>