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

Connect Components with Events challenge
In checking my challenge for the Lightning Components Basics module, Connect Components With Events section, I get the following 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."
I also get the following error when I load the app, and try to add an item (the item gets added to my SF database despite the error):
"Access Check Failed! AttributeSet.set(): 'errors' of component 'markup://lightning:input {82:0} {packed}' is not visible to 'markup://c:campingListForm {10:0}'"
Here is my code:
campingListForm.cmp:
campingListFormController.js:
campingListFormHelper.js:
campingList.cmp
What am I missing?!
Thanks in advance for any help!
"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."
I also get the following error when I load the app, and try to add an item (the item gets added to my SF database despite the error):
"Access Check Failed! AttributeSet.set(): 'errors' of component 'markup://lightning:input {82:0} {packed}' is not visible to 'markup://c:campingListForm {10:0}'"
Here is my code:
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:
({ 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); } })
What am I missing?!
Thanks in advance for any help!
<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>
And Adding The following Div:
<div aria-labelledby="newitemform">
<fieldset class="slds-box slds-theme--default slds-container--small">
<c:campingListForm />
</fieldset>
</div>