Pardeep Jain Pardeep Jain - 1 year ago 66
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'
Actually working on forms found error during validation of the form.

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

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

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

One more thing - why does
accept some characters like
but not all characters like
, etc.?

here is plnkr which i have used for demo purpose

Plunker code

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

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download