input type=“number” not clearable for non-number (NaN)

[georgeawg]

I'm submitting a ...

• [x ] bug report

Current behavior:

The ng-model directive is unable to clear the content of an <input type="number"> element when that content parses to NaN (not a number). This can happen when a user pastes invalid content or simply types "eee".

Expected / new behavior:

Setting the ng-model input to null should clear the input.

Minimal reproduction of the problem with instructions:

See jsFiddle - enter "eee", click the "X"

AngularJS version: 1.7

Browser: [all | Chrome XX | Firefox XX | Edge XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Chrome

Anything else:

One fix is to add a custom directive:

app.directive('clearNan', function() {
  return {
    require: 'ngModel',
    link: function(scope, elem, attrs, ngModel) {
      ngModel.$formatters.push(function(value) {
        if (!value) elem.val(null);
        return value;
      });
    }
  };
})

See Stack Overflow: AngularJS - input type=“number” not clearable for non-number (NaN)

[bersLucas]

This is correct, AngularJS will not update the view model if the browser sees it as invalid. You can't clear the value of ngModel here because it hasn't been changed. Using a directive is the right way to do this, as suggested here: https://docs.angularjs.org/guide/forms#custom-validation

[Narretz]

Yes, unfortunately our hands are a bit tied here.