• Wade Lovell 1
  • NEWBIE
  • 14 Points
  • Member since 2016

  • Chatter
    Feed
  • 0
    Best Answers
  • 0
    Likes Received
  • 0
    Likes Given
  • 0
    Questions
  • 3
    Replies
I made a mistake in one of my Challenges that may be linked to something i did during an execrise in the lesson.  I see tips on the forum to use a fresh Trailhead Playground, but it's not clear how I do that.  I keep winding up in the previous one and getting error messages due to the mistake I may have mad previously.
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!