1

while doing Aura input data using forms trail (https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_basics/lex_dev_lc_basics_forms) challenge, I am getting following error:

The campingList JavaScript controller doesn't appear to be checking if form fields are valid.

My code is as follows:

campingList.cmp

<aura:component >

<aura:attribute name="items" type="Camping_Item__c[]"/>
<aura:attribute name="newItem" type="Camping_Item__c"
                default="{'sobjectType' : 'Camping_Item__c',
                           'Name': '',
                           'Packed__c': false,
                           'Quantity__c' : 0,
                           'Price__c' : 0}"/>
<ol>

    <li>Bug Spray</li>

    <li>Bear Repellant</li>

    <li>Goat Food</li>

</ol>

<fieldset class="slds-box slds-theme--default slds-container--small">

<legend id="newCampItemForm" class="slds-text-heading--small 
  slds-p-vertical--medium">
  Add Camping Item
</legend>

<form class="slds-form--stacked">

  <lightning:input aura:id="itemname" 
                   label="Name"
                   name="itemname"
                   value="{!v.newItem.Name}"
                   required="true"
  />

  <lightning:input type="number" 
                   aura:id="quantity" 
                   label="Quantity"
                   name="quantityfield"
                   value="{!v.newItem.Quantity__c}"
                   min="1"
                   required="true"
   />

  <lightning:input type="number" 
                   aura:id="price" 
                   label="Price"
                   name="price"
                   value="{!v.newItem.Price__c}"
                   formatter="currency"
                   step="0.1"
  />

  <lightning:input type="checkbox" 
                   aura:id="itemform" 
                   label="Packed?"
                   name="packed"
                   checked="{!v.newItem.Packed__c}"
  />

  <lightning:button label="Create Camping Item"
                    variant="brand"
                    onclick="{!c.clickCreateItem}"
  />

</form>

 </fieldset>
 <div class ="slds-card slds-p-top--meduim">
  <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="campItem">
                <c:campingListItem item="{!campItem}"/>
            </aura:iteration>
       </div>
    </section>

</div>

</aura:component>

campingListItem.cmp

<aura:component >
<aura:attribute name="item" type="Camping_Item__c" required="true"/>        

<p>Name: {!v.item.Name}</p>
<p>Price: <lightning:formattednumber value="{!v.item.Price__c}" 
                                     style="currency" 
                                     currencyCode="USD" />    </p>
<p>Quantity:<lightning:formattednumber value="{!v.item.Quantity__c}" />
</p>
<p>
   <lightning:input type="toggle"                           
                     label="Packed?"                          
                     name="packed"                        
                     checked="{!v.item.Packed__c}" 
   />
</p>

<div>
    <lightning:button label="Packed!" name='myButton' onclick="
     {!c.packItem}"/>
  </div>   

</aura:component>

campingListController.js

({
clickCreateItem: function(component, event, helper) {

    // Simplistic error checking
    var validItem = true;

    // Name must not be blank
    var nameField = component.find("itemname");
    var itemname = nameField.get("v.value");
    if ($A.util.isEmpty(itemname)){
        validItem = false;
        nameField.set("v.errors", [{message:"Item name can't be blank."}]);
    }
    else {
        nameField.set("v.errors", null);
    }

    // Quantity must not be blank
    var quantityField = component.find("quantity");
    var quantity = quantityField.get("v.value");
    if ($A.util.isEmpty(quantity) || isNaN(quantity) || (quantity <= 1)){
        validItem = false;
        quantityField.set("v.errors", [{message:"Quantity can't be blank."}]);
    }
    else {
        quantityField.set("v.errors", null);
    }

    var priceField = component.find("price");
    var price = priceField.get("v.value");
    if ($A.util.isEmpty(price) || isNaN(price) || (price <= 0.0)){
        validItem = false;
        priceField.set("v.errors", [{message:"Price can't be blank."}]);
    }
    else {
        quantityField.set("v.errors", null);
    }


    if(validItem){            
        var newItem = JSON.parse(JSON.stringify(component.get("v.newItem")));

        console.log("Items before 'create': " + JSON.stringify(theItems));
        theExpenses.push(newItem);
        component.set("v.expenses", theItems);
        console.log("Items after 'create': " + JSON.stringify(theItems));
        theItems.push(newItem);
        component.set("v.items", theItems);

    }
}
})

and campingListItemController.js is as follows:

({packItem : function(component, event, helper) {
    component.set("v.item.Packed__c", "true");
    var btnClick = event.getSource();
    btnClick.set("v.disabled",true);
},
})

The Camping Item object is as follows:

Camping Item Object In the above code though I am validating the inputs, getting no idea why still I am getting this error.

6
  • please confirm if you have put correct fields API names in lightning:input tag. – Rahul Gawale Dec 16 '19 at 6:26
  • Hi @rahulgawale, yeah I have checked. They seem to be fine. – Joy Dec 16 '19 at 7:41
  • Check if the validations are working correctly. – Rahul Gawale Dec 16 '19 at 7:45
  • BDW Quantity can be 1. but your logic is accepting only greater than 1, replace (quantity <= 1) with (quantity < 1) – Rahul Gawale Dec 16 '19 at 7:48
  • Still facing the same issue after the change. – Joy Dec 16 '19 at 7:57
0

You may need to check if the Quantity and Price are accepting only number and >0 , so update your error handling part with below.

if ($A.util.isEmpty(price) || isNaN(price) || (price <= 0.0))  {}

and if ($A.util.isEmpty(quantity) || isNaN(quantity) || (quantity <= 0)){ }

1
  • Hi @ManishAnand, thanks for your response. Actually still I am getting the same issue even after modifying the code as you suggested. – Joy Dec 16 '19 at 7:37
0

There are three problems here.

  • Quantity can be 1. but your logic is accepting only greater than 1, replace (quantity <= 1) with (quantity < 1)
  • component.find works on the basis of aura id, for Quantity aura id is itemform but you are checking it like var quantityField = component.find("quantity"); which is wrong, change the aura:id to quantity.
  • Same issue with price, var priceField = component.find("price");. change the aura:id to price.
3
  • Hi @rahulgawale, I have updated the code as per your suggestion. I have updated the original post as well. Still the same issue. – Joy Dec 16 '19 at 8:06
  • did you test your component manuallY? – Rahul Gawale Dec 16 '19 at 8:09
  • Actually I am sorry. Being new to the salesforce framework, I don't have any idea how to do test it. – Joy Dec 16 '19 at 8:12
0

Try this code in your campingListController.js after changing the input field Id's in component.

// Simplistic error checking
//var validItem = true;

// Name must not be blank
var nameField = component.find("itemname").reduce(function (validSoFar, inputCmp){
    inputCmp.showHelpMessageIfInvalid();
    return validSoFar && inputCmp.get('v.validity').valid;

        }, true);



// Quantity must not be blank
var quantityField = component.find("quantity").reduce(function (validSoFar, inputCmp){
    inputCmp.showHelpMessageIfInvalid();
    return validSoFar && inputCmp.get('v.validity').valid;

        }, true);

//var quantity = nameField.get("v.value");


var priceField = component.find("price").reduce(function (validSoFar, inputCmp){
    inputCmp.showHelpMessageIfInvalid();
    return validSoFar && inputCmp.get('v.validity').valid;

        }, true);




if(validItem){
    var newItem = component.get("v.newItem");
    console.log("Create item: " + JSON.stringify(newItem));
    //helper.createItem(component, newItem);
    //        var theItems = component.get("v.items");

// Copy the expense to a new object
// THIS IS A DISGUSTING, TEMPORARY HACK
var newItem = JSON.parse(JSON.stringify(item));

console.log("Items before 'create': " + JSON.stringify(theItems));
theExpenses.push(newItem);
component.set("v.expenses", theItems);
console.log("Items after 'create': " + JSON.stringify(theItems));
theItems.push(newItem);
component.set("v.items", theItems);

}
component.set("v.newItem",{'sobjectType':'Camping_Item__c',
            'Name': '',
            'Quantity__c': 0,
            'Price__c': 0,
            'Packed__c': false}); }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.