You need to sign in to do that
Don't have an account?

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 :-
Thanks,
Manish.
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.
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
It worked. Thanks.
However, I also noticed:- Keeping style ="Currency" / "Decimal" , instead of "currency" / "decimal" AND modifying CampingListController.js
line number- 13 from to , it didn't throw any error as I mentioned in the query.
Why this behaviour ? Shouldn't it throw the same error?
Thanks,
Manish.
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
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.