1

I'm working through a Trailhead tutorial, and I am getting an error that confuses me.

I've reduced it here to the minimum code I can for reproducing the error, and I'm hoping someone can explain to me what's causing it.

campingApp renders like this, as expected:

enter image description here

But then when I click "Add quantity" I get this error:

Sorry to interrupt

This page has an error. You might just need to refresh it. Action failed: lightning:formattedNumber$controller$init [Value number out of range for numberformat options property style] Failing descriptor: {lightning:formattedNumber$controller$init}


campingApp.app:

<aura:application extends="force:slds">
    <c:campingOneNewItem />
</aura:application>

campingOneNewItem.cmp:

<aura:component >
    <aura:attribute name="items"
                    type="Camping_Item__c[]"/>
    <aura:attribute name="newItem"
                    type="Camping_Item__c"
                    default="{
                             'sObjectType': 'CampingItem__c',
                             'Quantity__c': 0,
                             'Price__c':                              }"/>
    <form>
        <lightning:input type="number"
                 label="Quantity"
                 name="campingitemquantity"
                 value="{!v.newItem.Quantity__c}"
                 min="1"
                 aura:id="newcampingitemform"
                 messageWhenRangeUnderflow="Enter an amount that's at least 1"/>
        <lightning:button label="Add quantity"
                          onclick="{!c.addQuantity}"/>
    </form>
    <ol>
        <aura:iteration items="{!v.items}" var="item">
            <li><c:campingListItemSimple item="{!item}"/></li>
        </aura:iteration>
    </ol>
</aura:component>

campingListItemSimple.cmp:

<aura:component >
    <aura:attribute name="item"
                type="Camping_Item__c"
                required="true"/>
    <h2>Quantity</h2>
    <p>
        <lightning:formattedNumber value="{! v.item.Quantity__c}" style="number"/>
    </p>
</aura:component>

campingOneNewItemController.js:

({
    addQuantity : function(component, event, helper) {
        // Get current items
        var items = component.get('v.items');
        // Create the new item
        var newItem = component.get('v.newItem');

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

        items.push(newItem);
        component.set("v.items", items);
    }
})
1
  • It is also case sensitive. I went crazy until I realized "Currency" != "currency".
    – Timothy
    May 3, 2019 at 17:06

2 Answers 2

2

The error basically means that you are assigning an incorrect value to the Style attribute --> "number"

As per the documentation, allowed style attribute values are

decimal, currency, and percent

1

In campingListItemSimple.cmp style cannot be "number"

 <lightning:formattedNumber value="{! v.item.Quantity__c}" style="number"/>

This works:

 <lightning:formattedNumber value="{! v.item.Quantity__c}" style="decimal"/>
1
  • Welcome to Salesforce Stack Exchange (SFSE)! While contributions are more than welcome, and answering old questions is great if you have a different answer or an update due to some change in Salesforce functionality, I am curious as to why you chose to answer a 4-year-old question with an answer that is essentially the same as the answer which was accepted 4 years ago?
    – Moonpie
    Dec 30, 2021 at 4:27

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .