+ Start a Discussion
Ritvic SharmaRitvic Sharma 

Error when I submit Connect Components with Events Trail challenge. I debugged, even the output is correct. Error : "The campingList component doesn't appear to have a Quantity input field in the form using a Lightning Base component."

Unable to debug the cause, can anybody help ?
Posting the code I am using : 

campingList.cmp

<aura:component implements ="flexipage:availableForAllPageTypes" 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}"/>

    <lightning:layout>    
        <lightning:layoutItem padding="around-small" size="6">
            <c:campingListForm />
        </lightning:layoutItem>        
        
        <lightning:layoutItem padding="around-small" size="6">
        <!-- an iteration of campingListItem components for displaying the items entered -->
            <lightning:card title="Camping Items">
                <p class="slds-p-horizontal--small">
                    <aura:iteration items="{!v.items}" var="item">
                        <c:campingListItem item="{!item}"/>
                    </aura:iteration> 
                </p>
                </lightning:card>
        </lightning:layoutItem>
    </lightning:layout>

</aura:component>

campingList.controller:
({
    doInit: function(component, event, helper) {
        
        var action = component.get("c.getItems");
        
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.items", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
       
        $A.enqueueAction(action);
    },

    handleAddItem: function(component, event, helper) {
        var newCampingItem = event.getParam("item");
        
        
        console.log('itemRecieved>>>>>>>', JSON.parse(JSON.stringify(newCampingItem)));
        
        var action = component.get("c.saveItem");
        action.setParams({ "campingItem": newCampingItem });

        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var items = component.get("v.items");
                items.push(response.getReturnValue());
                component.set("v.items", items);
            }

        });
        $A.enqueueAction(action)
        
        
    }

})

CampingListController (Apex): 
public with sharing class CampingListController {
    @AuraEnabled
    public static List<Camping_Item__c> getItems() {
         return [SELECT Id, Name, Packed__c, Price__c, Quantity__c, CreatedDate 
                FROM Camping_Item__c];
    }

    @AuraEnabled
    public static Camping_Item__c saveItem(Camping_Item__c campingItem) {
        // Perform isUpdateable() checking first, then
        
        System.debug('>>>>>>>>>'+campingItem);
        
        upsert campingItem;
        return campingItem;
    }
     
}


campingListForm.cmp : 
<aura:component>
    <aura:attribute name="newItem" type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c',
                                                                     'Name': '',
                                                                     'Quantity__c': 0,
                                                                     'Price__c': 0,
                                                                     'Packed__c': false }"/>
                                                                     
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
                                                
    <div aria-labelledby="newcampingitemform">

        <fieldset class="slds-box slds-theme--default slds-container--small">
        <legend id="newcampingitemform" class="slds-text-heading--small 
          slds-p-vertical--medium">
          Add Camping Item
        </legend>
  

        <form class="slds-form--stacked">          
            <lightning:input aura:id="campingitemform" label="Name"
                             name="name"
                             value="{!v.newItem.Name}"
                             required="true"/> 

            <lightning:input type="number" aura:id="campingitemform" label="Quantity"
                             name="Quantity"
                             min="0.1"
                             formatter="decimal"
                             step="0.01"
                             value="{!v.newItem.Quantity__c}"
                             messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>

            <lightning:input type="number" aura:id="campingitemform" label="Price"
                             name="price"
                             min="0.1"
                             formatter="currency"
                             step="0.01"
                             value="{!v.newItem.Price__c}"
                             messageWhenRangeUnderflow="Enter an amount that's at least $0.10."/>

            <lightning:input type="checkbox" aura:id="campingitemform" label="Packed?"  
                             name="expreimbursed"
                             checked="{!v.newItem.Packed__c}"/>
            
            <lightning:button label="Create Camping Item" 
                              class="slds-m-top--medium"
                              variant="brand"
                              onclick="{!c.clickCreateItem }"/>
            
        </form>

  
      </fieldset>
      <!-- / BOXED AREA -->
    </div>

</aura:component>

campingListForm.controller
({
    clickCreateItem : function(component, event, helper) {        
        
        var validCamping = component.find('campingitemform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        // If we pass error checking, do some real work
        if(validCamping){
            helper.createItem(component, event, helper); 
        }
        
       
    }
    
})

campingListForm.helper
({
    createItem : function(component, event, helper) {
     var newCampingItem = component.get("v.newItem");
      console.log('---->formData:  ', JSON.stringify(newCampingItem));

      var saveItemEvent = component.getEvent("addItem");
      saveItemEvent.setParams({ "item": newCampingItem });
      saveItemEvent.fire();
      
      component.set("v.newItem", { 'sobjectType': 'Camping_Item__c',
                                                                     'Name': '',
                                                                     'Quantity__c': 0,
                                                                     'Price__c': 0,
                                                                     'Packed__c': false  });
        
        
      console.log('-------> event fired: ', saveItemEvent);    
    }
})


campingListItem.cmp:
<aura:component implements="force:appHostable">
<aura:attribute name="item" type ="Camping_Item__c" default = "" required="true"/>

<p>Name : <lightning:formattedText value="{!v.item.Name}" /> </p>
<p>Price : <lightning:formattedNumber value="{!v.item.Price__c}"/> </p>
<p>Quantity : <lightning:formattedNumber value="{!v.item.Quantity__c}"/> </p>
<p>Packed? :  <lightning:input name = "isPacked" type="toggle" checked="{!v.item.Packed__c}"/> </p>

<!-- <lightning:button label="Packed!" name = "packButton" disabled = "false" onclick="{! c.packItem }"/> -->

</aura:component>



Stuck for hours, please assist.
Thanks,
Ritvic
Ritvic SharmaRitvic Sharma
Also, defined this event : 

<aura:event type="COMPONENT">
    <aura:attribute name="item" type="Camping_Item__c"/>
</aura:event>