You need to sign in to do that
Don't have an account?
Nelson 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>
<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>
https://trailhead.salesforce.com/trails/lex_dev/modules/lex_dev_lc_basics/units/lex_dev_lc_basics_events
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.
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
I'll save you the trouble of trying <lightning:formatted with the default value of decimal. I get the same error.
Thanks,
Wade
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!).
https://success.salesforce.com/_ui/core/chatter/groups/GroupProfilePage?g=0F9300000009Nek
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
CampingList.cmp
campingListController.js
campingListHelper.js
campingListItem.cmp
campingListItemController.js
campingListFrom.cmp campinListFormController.js
campinListFormHelper.js
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.
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.
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.
to
Cheers it worked :)
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
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>
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>
<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>
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.
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
CampingList.cmp
campingHeader.cmp
campingListItem.cmp
campingListController.js
<lightning:input type="checkbox" aura:id="campForm" label="Packed?"
name="packed"
checked="{!v.newItem.Packed__c}"
value="{!v.newItem.Packed__c}"/>
https://github.com/1rfan555/Apex-Basics/blob/master/Aura-Basics
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! :)
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
See the output in this screenshot
<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
So after that :
Some important differences I observed and what I did wrong that I noticed by seeing Gajendra's code is this:
1. <lightning:input label="Packed" type="checkbox"
name="packed" value="{!v.newItem.Packed__c}" aura:id="newForm" />.
It shouldn't be value , rather it should be checked when type is checkbox . You can see this when in the CampingListItem.cmp, the toggle button never turns ON.
2. <lightning:input label="Price" type="currency"
name="price" value="{!v.newItem.Price__c}" aura:id="newForm" <!-- formatter="currency" --> />
The type should be equal to "number", and we should not miss to write formatter="currency". Then only the Price box will be having $ sign before we give any input, which the challenge demands.
3. Mistake number three is rather silly I did on the controller side but I found it out on my own.
let sObjectDefination = "{'sObjectType':'Camping_Item__c','Name':'','Packed__c':false,'Price__c':0,'Quantity__c':0}";
component.set("v.newItem","sObjectDefination");
It a variable on controller side, it shouldn't be inside quotes "".
4. <lightning:input label="Quantity" type="number"
name="quantity" value="{!v.newItem.Quantity__c}" min="1" aura:id="newForm" />
And believe me, we need to Validate the data at the controller side as said. If we simply write min="1" and think yeah this will automatically give the error message then our assumption is wrong. Please don't confuse it with type and formatter. I think the type and formatter are like the PASSPORT, but min,... are like the VISA which will be seen/validated at the controller side.
@Alexey Kardychko screen shot above worked for me. Thank you Alex.
Gone are the days of long, obtrusive wires running across floorboards or walls. Many of today’s security cameras (https://dicsan.com/home/securitycameras/)are wireless, using Wi-Fi to communicate with a control panel or connected smart device. Wireless security cameras are easier to install, and they give you greater flexibility for placement.