Angular HTML 5 Input display nothing when decimal is null

Question

Here is my input which right now displays NaN if vehicle.total is null.

<input id="total" class="form-control" placeholder="Job Amount" 
 data-ng-model="vehicle.total" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" 
 value="vehicle.total" name="total"/>

How can I get the input to not display NaN and be empty instead?

PBLC · Accepted Answer · 2015-07-07 15:52:59Z

1

Null is Not a Number (NaN) so as long as that is null that is what will be displayed without providing some logic to capture the null value and display zero.

An easier and simpler method would be to manually instantiate vehicle.total to 0 in the controller.

You could also use ngInit but it is not recommended. https://docs.angularjs.org/api/ng/directive/ngInit

answered Jul 7, 2015 at 15:52

PBLC

2592 silver badges12 bronze badges

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

6 Comments

Sealer_05 Over a year ago

I understand that but was hoping the user wouldn't have to see that or zero unless they explicitly typed a zero. If total was null i was hoping to keep it that way or have it be undefined

PBLC Over a year ago

The 0 and null would both evaluate the same, I'm not sure of your limitations but its not uncommon to declare initial states in the controller.

Sealer_05 Over a year ago

In my api the total is nullable due to this record coming from other sources through integrations where it doesnt make sense to have total. So if one of these records come through to my screen I dont want to put a zero on a field that never had anything to begin with.

PBLC Over a year ago

You could use ngKeyUp to handle the input change and do all of the data binding in the controller, that way you can display an initial value of 0 without changing the null value

Sealer_05 Over a year ago

I cant have the user see the zero as well since that would be confusing for them. If there is a 0 than it should create a record with zero. Thanks though

|

Collectives™ on Stack Overflow

Angular HTML 5 Input display nothing when decimal is null

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related