You need to sign in to do that
Don't have an account?
Delphine Foo-Matkin
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>