Why binding to null not work when value of number input illegal in AngularJs

Question

See example here: https://jsfiddle.net/codefalling/u2mn764x/1/

<div ng-app>
  <div ng-controller="TodoCtrl">
      <input type="number" ng-model="value"  size="30" >
      <input type="button" ng-click="change()" class="btn-primary" value="TEST" >
  </div>
</div>

function TodoCtrl($scope) {
  $scope.change = function() {
    $scope.value = null
  }
}

When I type 10 into number input, click button, it turn to be empty.

However when I type a standalone e or . into number input, then click button, nothing happend. But $scope.value = 123 stills works.

So, Why view didn't get update(empty) in this situation?

Additional, is there any other way to empty it?

find the answer here : http://stackoverflow.com/questions/31706611/why-does-the-html-input-with-type-number-allow-the-letter-e-to-be-entered-in — Varit J Patel, Jul 05 '16 at 08:37
@varit05 This is not answer. My question is not why `e` can be inputed but **Why angular didn't update view** when I set `$scope.value` to null with illegal input such as standalone `e` — xcodebuild, Jul 05 '16 at 08:40
when you enter e or . it is still incomplete and not representing a valid value for the control, and looks like the browser will not even supply this value to your control. Check out this updated fiddle https://jsfiddle.net/u2mn764x/2/ — Thangadurai, Jul 05 '16 at 08:49
@zeroflagL You got this! So should I empty illegal input though DOM API? — xcodebuild, Jul 05 '16 at 08:59

score 1 · Answer 1 · answered Jul 05 '16 at 09:17

To clear out the HTML 5 number controls, you can check the state of the control and if it is invalid then override its value to blank. I have updated your fiddle with the below code https://jsfiddle.net/u2mn764x/3/

<div ng-app>
  <div ng-controller="TodoCtrl">
      <input type="number" ng-model="value"  size="30" id='mynumber'>
      <input type="button" ng-click="change()" class="btn-primary" value="TEST" >
  </div>
</div>

function TodoCtrl($scope) {
  $scope.change = function() {
    if (!document.getElementById('mynumber').validity.valid)
    {
        $scope.value = null
      document.getElementById('mynumber').value='';
    }

  }
}

score 0 · Answer 2 · answered Jul 05 '16 at 08:29

0

For short, because e and . is not the complete legal numeric value. According to Foalting point number in W3 spec:

if the value started by ., it must be followed by one or more "0—9";
if the value started by e, it must be followed by an optional + or -, and one or more "0-9"

As the HTML check is not passed, it will not trigger the JS, as I imagine. If you continue to input .1 or e45, it works.

answered Jul 05 '16 at 08:29

Qianyue

1,767
19
24

I know they are illegal. But why change `$scope.value = null` to `$scope.value = 123` works? – xcodebuild Jul 05 '16 at 08:32
I don't know, but `null` is not the legal input either. You can test with `$scope.value = '123'`, it does exactly as `$scope.value = null` does. – Qianyue Jul 05 '16 at 08:41
`$scope.value = '123'` just change the value to 123. So how could I empty this number inputbox? – xcodebuild Jul 05 '16 at 08:43
BTW, when there is a illegal number in input such as 223, `$scope.value = null` also empty it. – xcodebuild Jul 05 '16 at 08:46
see this answer:http://stackoverflow.com/a/18853513/1165178, " If the value of the element is not a valid floating-point number, then set it to the empty string instead." – Qianyue Jul 05 '16 at 08:51
**Set to empty string doesn't work,too**, could you please try it in jsfiddle? – xcodebuild Jul 05 '16 at 08:54

score 0 · Answer 3 · answered Jul 05 '16 at 08:53

As soon as you type 10 inside Number Input,Angular will bind 10 and it will be like $scope.value = 10, but when you fire click event,you are changing the value to null like $scope.value = null,so send the value of model through the event and bind it to your variable.

<div ng-app>
<div ng-controller="TodoCtrl">
  <input type="number" ng-model="value"  size="30" >
  <input type="button" ng-click="change($event,value)" class="btn-primary" value="TEST" >
</div>
</div>

And the javascript code :

function TodoCtrl($scope) {
   $scope.change = function($event,val) {
   $scope.value = val;
    }
 }

xcodebuild · Answer 4 · 2016-07-05T09:34:28.030

Thanks to comment of @zeroflagL.I found the answer.

Model did not have a value when input is illegal. So $scope.value = null or $scope.value = '' won't work because they are illegal value,too.

Model value and view value are both undefined, so angular did not update view.

We can use DOM API to empty illegal input manually. Or set modal to a value, force dirty check then set it to null again:

$scope.value = 0
$scope.$apply();
$scope.value = null

See https://jsfiddle.net/codefalling/xhcz3Lbj/

Why binding to null not work when value of number input illegal in AngularJs

4 Answers4