function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Nathan HincheyNathan Hinchey 

Lightning Components Basic: "Value number out of range for numberformat options property style"

I'm doing Lightning Components Basic - Input Data Using Forms, and I am running into an error I can't figure out.

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.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': 0
                             }"/>
    <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));
    
        // explicitly casting newItem.Quantity__c to Number had no effect:
        // newItem.Quantity__c = Number(newItem.Quantity__c);

        items.push(newItem);
        component.set("v.items", items);
	}
})

campingApp renders like this:
User-added image

But when I click Add quantity I get an 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}

User-added image

I'm pretty sure that somehow Quantity__c is being cast to string, but even when I explicitly cast it to number before calling component.set I get this error.
Best Answer chosen by Nathan Hinchey
ReidCReidC
On Line 7 of your campingListItemSimple.cmp, style="number" is not valid.
If you look at the "style" attribute here:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_formattedNumber.htm
You'll see:
"The number formatting style to use. Possible values are decimal, currency, and percent. This value defaults to decimal."
What happens if you update it to a valid value?

All Answers

ReidCReidC
On Line 7 of your campingListItemSimple.cmp, style="number" is not valid.
If you look at the "style" attribute here:
https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_formattedNumber.htm
You'll see:
"The number formatting style to use. Possible values are decimal, currency, and percent. This value defaults to decimal."
What happens if you update it to a valid value?
This was selected as the best answer
Nathan HincheyNathan Hinchey
OH! So it was saying the value that was the string "number" is out of range for the "options property" called "style"! I was misreading it, thinking that it was telling me that it was telling me that the "Value number" was out of range for the "options property style" called "numberformat".

Is there anywhere to learn how to read these error messages?
ReidCReidC
Great question.  I haven't seen one.  It would benefit from some punctuation marks for sure.