Angular data binding returning NaN when value is zero

Question

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?

You have to watch and convert the datatype of amount to integer otherwise its string multiplying with 10 which will give you unexpected results. — Rahil Wazir
– Rahil Wazir, Commented Sep 28, 2014 at 8:59

Sander Elias · Accepted Answer · 2014-09-28 09:12:41Z

8

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 Sep 28, 2014 at 9:12

Sander Elias

7546 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Subash Selvaraj · Accepted Answer · 2014-09-28 08:53:47Z

1

Use ternary operator to check isNaN in your tempalte like below.

<input type="text" class="form-control" model="amount">
<label>Your amount is {{ (!isNaN(amount)) ?  (amount * 10) : '' }}</label>

answered Sep 28, 2014 at 8:53

Subash Selvaraj

3,3871 gold badge16 silver badges17 bronze badges

Comments

CertainPerformance · Accepted Answer · 2018-08-17 07:34:53Z

1

Your amount is

{{ (amount * 10) || "0" }}

This works fine.

edited Aug 17, 2018 at 7:34

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

answered Aug 17, 2018 at 7:29

Sridharkarthik

111 bronze badge

Comments

Pradnya Bhagat · Accepted Answer · 2018-03-15 06:41:06Z

0

Your amount is {{ (amount * 10) || "0" }}

answered Mar 15, 2018 at 6:41

Pradnya Bhagat

2191 gold badge4 silver badges20 bronze badges

Comments

Niranjana V S · Accepted Answer · 2021-09-21 09:41:20Z

0

a = (a*10)+b;

where b is undefined value.so, we are getting NaN value.

a = (a*10) || b;

this || operator instead of "+" solved my issue

answered Sep 21, 2021 at 9:41

Niranjana V S

1772 silver badges3 bronze badges

2 Comments

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Nico Haase Over a year ago

Please add some explanation to your answer such that others can learn from it

Collectives™ on Stack Overflow

Angular data binding returning NaN when value is zero

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related