Pardeep Jain Pardeep Jain - 7 months ago 21
HTML Question

Why does the value of an input with type="number" remain 'NaN' after I delete the contents?

Very easy question but too much confused about whats the scope of

input type='number'
field.
Actually working on forms found error during validation of the form.

<input type="number" placeholder="Demo Number Field" class="form-control" [(ngModel)]="demoNumber">
{{demoNumber}}

<input type="text" placeholder="Demo Text Field" class="form-control" [(ngModel)]="demoText">
{{demoText}}


When I load the page for the first time these input fields have values of
null
but whenever I fill those fields once and then delete all contents from both fields, the value of
Textfield
is
null
but the value of
numberfield
remains
NAN
instead of
null
. Why is this so? Due to this, the
form
is valid even if number field is empty (after removing content) which is wrong. How can I fix this?

One more thing - why does
numberfield
accept some characters like
e
but not all characters like
d,f,r
, etc.?

here is plnkr which i have used for demo purpose

Plunker code

PS :- Is there any way to restrict user not to allow
e
or something else in the number field ?

Answer

Edit:: chrome accepts e, firefox also accepts e. because e can exist in the form of 1.1e+10.

However firefox does't allow e if its in invalid formats like, e or 1e etc. Firefox allows if its in valid format like 1.1e+10.

Original answer: After the edit and making the text box empty, scope of text field is set to empty string, not null.

Same way, scope of number field is set to empty string. When you try to render it, you will get NaN.

For your second question, I have tried in firefox and it is not accepting any characters like e, f, r etc. They are being shown in red color.