Angular data binding returning NaN when value is zero

Issue

I’m doing some simple data binding like so:

<input type="text" class="form-control" model="amount">
<label>Your amount is {{amount * 10 }}</label>

However, initially, when the text input is empty it returns NaN.

How can I prevent this from happening with Angular?

Solution

You can try this:

<input type="text" class="form-control" model="amount">
<label>Your amount is {{ (+amount) * 10 }}</label>

HTML text inputs are text by definition. the added + will convert it to an number prior to being used.

Answered By – Sander Elias

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published