Skip to main content The Trailblazer Community will be unavailable from 2/1/2025 to 2/2/2025. Please plan your activities accordingly.
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:

<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!
2 answers
  1. Sep 11, 2017, 5:58 PM

    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>

     
Loading
0/9000