You need to sign in to do that
Don't have an account?

Challenge Not yet complete... here's what's wrong: The campingList JavaScript controller doesn't appear to be checking if form fields are valid.
Component Code:
<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[]"/>
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
<!-- 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">
<lightning:input type="number" label="Quantity"
class="slds-input"
name="quantity"
min="1"
value="{!v.newItem.Quantity__c}"
required="true" aura:id="quantity"/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<lightning:input type= "number" aura:id="price" label="Price"
formatter="currency"
class="slds-input"
value="{!v.newItem.Price__c}" />
</div>
</div>
<div class="slds-form-element">
<lightning:input type = "checkbox" aura:id="itemform" label="Packed?"
class="slds-checkbox"
checked="{!v.newItem.Packed__c}"/>
</div>
<div class="slds-form-element">
<lightning:button label="Create Camping Item"
class="slds-button slds-button--brand"
onclick="{!c.clickCreateItem}"/>
</div>
</form>
<!-- / CREATE 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>
Controller code:
({
clickCreateItem: function(component, event, helper) {
// 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);
}
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);
}
if(validItem){
var newItem = component.get("v.newItem");
console.log("Create item: " + JSON.stringify(newItem));
//helper.createItem(component, newItem);
// var theItems = component.get("v.items");
// Copy the expense to a new object
// THIS IS A DISGUSTING, TEMPORARY HACK
var newItem = JSON.parse(JSON.stringify(item));
console.log("Items before 'create': " + JSON.stringify(theItems));
theExpenses.push(newItem);
component.set("v.expenses", theItems);
console.log("Items after 'create': " + JSON.stringify(theItems));
theItems.push(newItem);
component.set("v.items", theItems);
}
}
})
Requesting your help to let me know what is wrong with the code?
<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[]"/>
<ol>
<li>Bug Spray</li>
<li>Bear Repellant</li>
<li>Goat Food</li>
</ol>
<!-- 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">
<lightning:input type="number" label="Quantity"
class="slds-input"
name="quantity"
min="1"
value="{!v.newItem.Quantity__c}"
required="true" aura:id="quantity"/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<lightning:input type= "number" aura:id="price" label="Price"
formatter="currency"
class="slds-input"
value="{!v.newItem.Price__c}" />
</div>
</div>
<div class="slds-form-element">
<lightning:input type = "checkbox" aura:id="itemform" label="Packed?"
class="slds-checkbox"
checked="{!v.newItem.Packed__c}"/>
</div>
<div class="slds-form-element">
<lightning:button label="Create Camping Item"
class="slds-button slds-button--brand"
onclick="{!c.clickCreateItem}"/>
</div>
</form>
<!-- / CREATE 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>
Controller code:
({
clickCreateItem: function(component, event, helper) {
// 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);
}
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);
}
if(validItem){
var newItem = component.get("v.newItem");
console.log("Create item: " + JSON.stringify(newItem));
//helper.createItem(component, newItem);
// var theItems = component.get("v.items");
// Copy the expense to a new object
// THIS IS A DISGUSTING, TEMPORARY HACK
var newItem = JSON.parse(JSON.stringify(item));
console.log("Items before 'create': " + JSON.stringify(theItems));
theExpenses.push(newItem);
component.set("v.expenses", theItems);
console.log("Items after 'create': " + JSON.stringify(theItems));
theItems.push(newItem);
component.set("v.items", theItems);
}
}
})
Requesting your help to let me know what is wrong with the code?
({
clickCreateItem: function(component, event, helper) {
// Simplistic error checking
//var validItem = true;
// Name must not be blank
var nameField = component.find("itemname").reduce(function (validSoFar, inputCmp){
inputCmp.showHelpMessageIfInvalid();
return validSoFar && inputCmp.get('v.validity').valid;
}, true);
// Quantity must not be blank
var quantityField = component.find("quantity").reduce(function (validSoFar, inputCmp){
inputCmp.showHelpMessageIfInvalid();
return validSoFar && inputCmp.get('v.validity').valid;
}, true);
//var quantity = nameField.get("v.value");
var priceField = component.find("price").reduce(function (validSoFar, inputCmp){
inputCmp.showHelpMessageIfInvalid();
return validSoFar && inputCmp.get('v.validity').valid;
}, true);
if(validItem){
var newItem = component.get("v.newItem");
console.log("Create item: " + JSON.stringify(newItem));
//helper.createItem(component, newItem);
// var theItems = component.get("v.items");
// Copy the expense to a new object
// THIS IS A DISGUSTING, TEMPORARY HACK
var newItem = JSON.parse(JSON.stringify(item));
console.log("Items before 'create': " + JSON.stringify(theItems));
theExpenses.push(newItem);
component.set("v.expenses", theItems);
console.log("Items after 'create': " + JSON.stringify(theItems));
theItems.push(newItem);
component.set("v.items", theItems);
}
component.set("v.newItem",{'sobjectType':'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0,
'Packed__c': false});
}
})