Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Manish Anand 22Manish Anand 22 

Trailhead module: Lightning Components Basics - Input Data Using Forms

Hi All,

I am trying to complete this challenge, but getting below error-
This page has an error. You might just need to refresh it.
Action failed: lightning:formattedNumber$controller$init [Value Currency out of range for numberformat options property style]
Failing descriptor: {lightning:formattedNumber$controller$init}
 I referred the doc- https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_formattedNumber.htm
Everything seems to be fine. Below is my code.

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',
                                                                   'Quantity__c' : 0 ,
                                                                    'Price__c' : 0,
                                                                    'Packed__c' : false 
                                                                    }" />
   
    <form class="slds-form--stacked">   
    
     <lightning:input aura:id="campingform" label="Name"
                      name="campingname"
                      value="{!v.newItem.Name}"
                      required="true"
                      />
      <lightning:input aura:id="campingform" label="Quantity"
                       name="campingquantity"
                       min="1"
                       step="1"
                       value="{!v.newItem.Quantity__c}"
                       messageWhenRangeUnderflow="Enter atleast 1 quantity."
                       />
      <lightning:input aura:id="campingform" label="Price"
                       name="campingprice"
                       formatter="currency"
                       value="{!v.newItem.Price__c}"
                       messageWhenValueMissing="Did you forget me?"
                       />
         <lightning:input type="checkbox" aura:id="campingform" label="Packed?" 
                                         name="campingpacked"
                                         checked="{!v.newItem.Packed__c}"/>
        
      <lightning:button label="Create Camping" 
                        class="slds-m-top--medium"
                        variant="brand"
                        onclick="{!c.clickCreateItem}"/>
    </form>
     <lightning:card title="Campings">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.items}" var="itm">
                <c:campingListItem item="{!itm}"/>
            </aura:iteration>
        </p>
    </lightning:card>	
</aura:component>
CampingListController.js 
{
	clickCreateItem : function(component, event, helper) {
        var validCamping = component.find('campingform').reduce(function (validSoFar,inputCmp){
        inputCmp.showHelpMessageIfInvalid();
        return validSoFar && inputCmp.get('v.validity').valid;
    }, true );
	if(validCamping)
    {
       var newCamping1 = component.get("v.newItem");
       console.log("Create Camping :" + JSON.stringify(newCamping1));
      // createCamping(component,newcamping);
       var theCampings = component.get("v.items");
       var newCamping = JSON.parse(JSON.stringify(newCamping1));
       console.log("Expenses before 'create': " + JSON.stringify(theCampings));
       theCampings.push(newCamping);
       component.set("v.items", theCampings);
       console.log("Expenses after 'create': " + JSON.stringify(theCampings));
       component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c',
                    'Name': '',
                    'Quantity__c': 0.0,
                    'Price__c': 0,
                    'Packed__c': false });
    }
	}
   
  
})
CampingListItem.cmp 
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" default="{'sobjectType':'Camping_Item__c',
                                                                'Packed__c':false}" required="True" />
    <P>
        Name : {!v.item.name}    </P>
    <P> 
        Price :
        <lightning:formattednumber value="{!v.item.Price__c}" style="Currency" />
    </P>
    <P>
        Quantity : 
        <lightning:formattednumber value="{!v.item.Quantity__c}" style="Decimal" />
    </P>
    <P>
        <lightning:input type="toggle" 
                         label="Packed?"
                         name="packed"
                         checked="{!v.item.Packed__c}" />
    </P>
    <p>
        <lightning:button label="Packed!" onclick="{!c.packItem}" />
    </p>
</aura:component>

Thanks,
Manish.​



 
sfdcMonkey.comsfdcMonkey.com
hi Manish, in your CampingListItem.cmp  component ,

use style="currency"   NOT    style="Currency"
use style="decimal"   NOT     style="Decimal"

lighting is case sensitive here decimal and Decimal are 2 different kind of animals

as per doc style attribute should be percent , currency or decimal.

Kindly let us know if it helps you, & close this query by selecting best answer if you got your solution, so this will helps other in future
 
http://sfdcMonkey.com

 
Manish Anand 22Manish Anand 22
Hi Piyush,

It worked. Thanks. 
However, I also noticed:-  Keeping style ="Currency"  / "Decimal" , instead of "currency" / "decimal"  AND  modifying CampingListController.js  
line number- 13  from   
var newCamping = JSON.parse(JSON.stringify(newCamping1));
to  
var newCamping = JSON.parse(JSON.stringify(theCampings));
, it didn't throw any error as I mentioned in the query. 
Why this behaviour ? Shouldn't it throw the same error?

Thanks,
Manish. 
 
sfdcMonkey.comsfdcMonkey.com
No, usually javaScript only throw syntax error while saving code, or sometimes when you run your lightning component,
and because <lightning:formattednumber> this is lightning base component that's why it's throwing this component initialization error, it should following right syntax,

Hope it will helps you, if you got your answer then close this query by choosing best answer so it will removed from unanswered queue
 
sfdcMonkey.comsfdcMonkey.com

If you find a post helpful and it answers your question, please mark it as an "Best Answer"! This will help the rest of the Community with similar issues identify the verified solution and benefit from it.