You need to sign in to do that
Don't have an account?
Ritvic Sharma
Error when I submit Connect Components with Events Trail challenge. I debugged, even the output is correct. Error : "The campingList component doesn't appear to have a Quantity input field in the form using a Lightning Base component."
Unable to debug the cause, can anybody help ?
Posting the code I am using :
campingList.cmp
<aura:component implements ="flexipage:availableForAllPageTypes" controller = "CampingListController">
<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/>
<lightning:layout>
<lightning:layoutItem padding="around-small" size="6">
<c:campingListForm />
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="6">
<!-- an iteration of campingListItem components for displaying the items entered -->
<lightning:card title="Camping Items">
<p class="slds-p-horizontal--small">
<aura:iteration items="{!v.items}" var="item">
<c:campingListItem item="{!item}"/>
</aura:iteration>
</p>
</lightning:card>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
campingList.controller:
({
doInit: function(component, event, helper) {
var action = component.get("c.getItems");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.items", response.getReturnValue());
}
else {
console.log("Failed with state: " + state);
}
});
$A.enqueueAction(action);
},
handleAddItem: function(component, event, helper) {
var newCampingItem = event.getParam("item");
console.log('itemRecieved>>>>>>>', JSON.parse(JSON.stringify(newCampingItem)));
var action = component.get("c.saveItem");
action.setParams({ "campingItem": newCampingItem });
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
var items = component.get("v.items");
items.push(response.getReturnValue());
component.set("v.items", items);
}
});
$A.enqueueAction(action)
}
})
CampingListController (Apex):
public with sharing class CampingListController {
@AuraEnabled
public static List<Camping_Item__c> getItems() {
return [SELECT Id, Name, Packed__c, Price__c, Quantity__c, CreatedDate
FROM Camping_Item__c];
}
@AuraEnabled
public static Camping_Item__c saveItem(Camping_Item__c campingItem) {
// Perform isUpdateable() checking first, then
System.debug('>>>>>>>>>'+campingItem);
upsert campingItem;
return campingItem;
}
}
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"/>
<div aria-labelledby="newcampingitemform">
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newcampingitemform" class="slds-text-heading--small
slds-p-vertical--medium">
Add Camping Item
</legend>
<form class="slds-form--stacked">
<lightning:input aura:id="campingitemform" label="Name"
name="name"
value="{!v.newItem.Name}"
required="true"/>
<lightning:input type="number" aura:id="campingitemform" label="Quantity"
name="Quantity"
min="0.1"
formatter="decimal"
step="0.01"
value="{!v.newItem.Quantity__c}"
messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
<lightning:input type="number" aura:id="campingitemform" 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 type="checkbox" aura:id="campingitemform" label="Packed?"
name="expreimbursed"
checked="{!v.newItem.Packed__c}"/>
<lightning:button label="Create Camping Item"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.clickCreateItem }"/>
</form>
</fieldset>
<!-- / BOXED AREA -->
</div>
</aura:component>
campingListForm.controller
({
clickCreateItem : function(component, event, helper) {
var validCamping = component.find('campingitemform').reduce(function (validSoFar, inputCmp) {
// Displays error messages for invalid fields
inputCmp.showHelpMessageIfInvalid();
return validSoFar && inputCmp.get('v.validity').valid;
}, true);
// If we pass error checking, do some real work
if(validCamping){
helper.createItem(component, event, helper);
}
}
})
campingListForm.helper
({
createItem : function(component, event, helper) {
var newCampingItem = component.get("v.newItem");
console.log('---->formData: ', JSON.stringify(newCampingItem));
var saveItemEvent = component.getEvent("addItem");
saveItemEvent.setParams({ "item": newCampingItem });
saveItemEvent.fire();
component.set("v.newItem", { 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0,
'Packed__c': false });
console.log('-------> event fired: ', saveItemEvent);
}
})
campingListItem.cmp:
<aura:component implements="force:appHostable">
<aura:attribute name="item" type ="Camping_Item__c" default = "" required="true"/>
<p>Name : <lightning:formattedText value="{!v.item.Name}" /> </p>
<p>Price : <lightning:formattedNumber value="{!v.item.Price__c}"/> </p>
<p>Quantity : <lightning:formattedNumber value="{!v.item.Quantity__c}"/> </p>
<p>Packed? : <lightning:input name = "isPacked" type="toggle" checked="{!v.item.Packed__c}"/> </p>
<!-- <lightning:button label="Packed!" name = "packButton" disabled = "false" onclick="{! c.packItem }"/> -->
</aura:component>
Stuck for hours, please assist.
Thanks,
Ritvic
Posting the code I am using :
campingList.cmp
<aura:component implements ="flexipage:availableForAllPageTypes" controller = "CampingListController">
<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
<aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/>
<lightning:layout>
<lightning:layoutItem padding="around-small" size="6">
<c:campingListForm />
</lightning:layoutItem>
<lightning:layoutItem padding="around-small" size="6">
<!-- an iteration of campingListItem components for displaying the items entered -->
<lightning:card title="Camping Items">
<p class="slds-p-horizontal--small">
<aura:iteration items="{!v.items}" var="item">
<c:campingListItem item="{!item}"/>
</aura:iteration>
</p>
</lightning:card>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
campingList.controller:
({
doInit: function(component, event, helper) {
var action = component.get("c.getItems");
action.setCallback(this, function(response) {
var state = response.getState();
if (state === "SUCCESS") {
component.set("v.items", response.getReturnValue());
}
else {
console.log("Failed with state: " + state);
}
});
$A.enqueueAction(action);
},
handleAddItem: function(component, event, helper) {
var newCampingItem = event.getParam("item");
console.log('itemRecieved>>>>>>>', JSON.parse(JSON.stringify(newCampingItem)));
var action = component.get("c.saveItem");
action.setParams({ "campingItem": newCampingItem });
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
var items = component.get("v.items");
items.push(response.getReturnValue());
component.set("v.items", items);
}
});
$A.enqueueAction(action)
}
})
CampingListController (Apex):
public with sharing class CampingListController {
@AuraEnabled
public static List<Camping_Item__c> getItems() {
return [SELECT Id, Name, Packed__c, Price__c, Quantity__c, CreatedDate
FROM Camping_Item__c];
}
@AuraEnabled
public static Camping_Item__c saveItem(Camping_Item__c campingItem) {
// Perform isUpdateable() checking first, then
System.debug('>>>>>>>>>'+campingItem);
upsert campingItem;
return campingItem;
}
}
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"/>
<div aria-labelledby="newcampingitemform">
<fieldset class="slds-box slds-theme--default slds-container--small">
<legend id="newcampingitemform" class="slds-text-heading--small
slds-p-vertical--medium">
Add Camping Item
</legend>
<form class="slds-form--stacked">
<lightning:input aura:id="campingitemform" label="Name"
name="name"
value="{!v.newItem.Name}"
required="true"/>
<lightning:input type="number" aura:id="campingitemform" label="Quantity"
name="Quantity"
min="0.1"
formatter="decimal"
step="0.01"
value="{!v.newItem.Quantity__c}"
messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>
<lightning:input type="number" aura:id="campingitemform" 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 type="checkbox" aura:id="campingitemform" label="Packed?"
name="expreimbursed"
checked="{!v.newItem.Packed__c}"/>
<lightning:button label="Create Camping Item"
class="slds-m-top--medium"
variant="brand"
onclick="{!c.clickCreateItem }"/>
</form>
</fieldset>
<!-- / BOXED AREA -->
</div>
</aura:component>
campingListForm.controller
({
clickCreateItem : function(component, event, helper) {
var validCamping = component.find('campingitemform').reduce(function (validSoFar, inputCmp) {
// Displays error messages for invalid fields
inputCmp.showHelpMessageIfInvalid();
return validSoFar && inputCmp.get('v.validity').valid;
}, true);
// If we pass error checking, do some real work
if(validCamping){
helper.createItem(component, event, helper);
}
}
})
campingListForm.helper
({
createItem : function(component, event, helper) {
var newCampingItem = component.get("v.newItem");
console.log('---->formData: ', JSON.stringify(newCampingItem));
var saveItemEvent = component.getEvent("addItem");
saveItemEvent.setParams({ "item": newCampingItem });
saveItemEvent.fire();
component.set("v.newItem", { 'sobjectType': 'Camping_Item__c',
'Name': '',
'Quantity__c': 0,
'Price__c': 0,
'Packed__c': false });
console.log('-------> event fired: ', saveItemEvent);
}
})
campingListItem.cmp:
<aura:component implements="force:appHostable">
<aura:attribute name="item" type ="Camping_Item__c" default = "" required="true"/>
<p>Name : <lightning:formattedText value="{!v.item.Name}" /> </p>
<p>Price : <lightning:formattedNumber value="{!v.item.Price__c}"/> </p>
<p>Quantity : <lightning:formattedNumber value="{!v.item.Quantity__c}"/> </p>
<p>Packed? : <lightning:input name = "isPacked" type="toggle" checked="{!v.item.Packed__c}"/> </p>
<!-- <lightning:button label="Packed!" name = "packButton" disabled = "false" onclick="{! c.packItem }"/> -->
</aura:component>
Stuck for hours, please assist.
Thanks,
Ritvic
<aura:event type="COMPONENT">
<aura:attribute name="item" type="Camping_Item__c"/>
</aura:event>