campingListForm.cmp:
<aura:component >
<aura:attribute name="newItem" type="Camping_Item__c"
default="{'sobjectType':'Camping_Item__c',
'Quantity__c':0,
'Price__c':0,
'Name':'',
'Packed__c':false}"/>
<aura:registerEvent name="addItem" type="c:addItemEvent"/>
<div class="slds-col slds-col--padded">
<legend id="newexpenseform" class="slds-text-heading--small slds-p-vertical--medium">
Add Item
</legend>
<form class="slds-form--stacked">
<fieldset class="slds-box slds-theme--default slds-container--small">
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<lightning:input aura:id="itemname" label="Item Name"
name="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 aura:id="quantity" label="Quantity"
name="quantity"
type="number"
class="slds-input"
value="{!v.newItem.Quantity__c}"
required="true"/>
</div>
</div>
<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<lightning:input aura:id="itemprice" label="Item Price"
type="number"
formatter="currency"
class="slds-input"
name="price"
value="{!v.newItem.Price__c}"/>
</div>
</div>
<div class="slds-form-element">
<div class="slds-form-element__control">
<lightning:input aura:id="packed" label="Item Packed"
type="checkbox"
name="Packed"
class="slds-checkbox"
checked="{!v.newItem.Packed__c}"/>
</div>
</div>
<div class="slds-form-element">
<lightning:button label="Add Item"
class="slds-button "
onclick="{!c.clickCreateItem}"/>
</div>
</fieldset>
</form>
</div>
</aura:component>
campingListFormController.js:
({
clickCreateItem : function(component, event, helper) {
if (helper.validateItemForm(component) === true) {
var newItem = component.get('v.newItem');
helper.createItem(component, newItem);
}
}
})
campingListFormHelper.js:
({
createItem: function(component, campingItem) {
var addItemEvent = component.getEvent('addItem');
addItemEvent.setParams({'item':campingItem});
addItemEvent.fire();
component.set('v.newItem', {'sobjectType':'Camping_Item__c'});
},
validateItemForm: function(component) {
var validItem=true;
var nameField = component.find('itemname');
var priceField = component.find('itemprice');
var qtyField = component.find('quantity');
var packedField = component.find('packed');
var itemName=nameField.get('v.value');
var itemPrice=priceField.get('v.value');
var itemQty=qtyField.get('v.value');
var itemPacked=packedField.get('v.value');
if (itemName === ''){
validItem=false;
nameField.set('v.errors', [{message:'Item name can\'t be blank.'}]);
} else {
nameField.set('v.errors', null);
}
if (itemPrice === 0) {
validItem=false;
priceField.set('v.errors', [{message:'Item price can\'t be zero.'}]);
} else {
priceField.set('v.errors', null);
}
if (itemQty === 0) {
validItem=false;
qtyField.set('v.errors', [{message:'Item quantity can\'t be zero.'}]);
} else {
qtyField.set('v.errors', null);
}
if (itemPacked === null) {
validItem=false;
packedField.set('v.errors', [{message:'Item packed checkbox can\'t be blank.'}]);
} else {
packedField.set('v.errors', null);
}
return validItem;
}
})
campingList.cmp
<aura:component 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}"/>
<c:campingHeader />
<c:campingListForm/>
<div class="slds-card slds-p-top--large">
<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="i">
<c:campingListItem item="{!i}"/>
</aura:iteration>
</div>
</section>
</div>
</aura:component>
campingListController.js:
What am I missing?!Thanks in advance for any help!({
handleAddItem: function(component,event,helper) {
var newItem = event.getParam('item');
var action = component.get('c.saveItem');
action.setParams({'item': newItem});
action.setCallback(this, function(res) {
var state = res.getState();
if (component.isValid() && state === 'SUCCESS') {
var itemList = component.get('v.items');
itemList.push(res.getReturnValue());
component.set('v.items', itemList);
}
});
$A.enqueueAction(action);
},
doInit: function(component,event,helper) {
var action = component.get('c.getItems');
action.setCallback(this, function(res) {
var state = res.getState();
if (component.isValid() && state === 'SUCCESS') {
component.set('v.items', res.getReturnValue());
} else {
console.log('Failed with state: ' + state);
}
});
$A.enqueueAction(action);
}
})
Thanks for the suggestion -- however, I tried it and it didn't work (I'm getting the same error). My campingList.cmp file looks like this after trying it:
<aura:component 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}"/>
<div class="slds-page-header" role="banner">
<div class="slds-grid">
<div class="slds-col">
<p class="slds-text-heading--label">Camping Items</p>
<h1 class="slds-text-heading--medium">My Camping Items</h1>
</div>
</div>
</div>
<div aria-labelledby="newitemform">
<fieldset class="slds-box slds-theme--default slds-container--small">
<c:campingListForm />
</fieldset>
</div>
<div class="slds-card slds-p-top--large">
<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="i">
<c:campingListItem item="{!i}"/>
</aura:iteration>
</div>
</section>
</div>
</aura:component>