当AngularJs中的数字输入值非法时，为什么绑定到null不起作用

Question

在此处查看示例：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
  }
}

当我在数字输入中输入10时，点击按钮，它变成了空。

但是，当我在数字输入中键入独立的 e 或 .，然后单击按钮时，没有任何反应。但是$scope.value = 123仍然有效。

那么，为什么在这种情况下视图没有得到更新（空）？

补充一下，还有什么办法可以清空吗？

Answer 1

感谢@zeroflagL 的评论。我找到了答案。

输入非法时模型没有值。所以$scope.value = null 或$scope.value = '' 不起作用，因为它们也是非法值。

模型值和视图值都未定义，因此 angular 没有更新视图。

我们可以使用 DOM API 手动清空非法输入。或者将 modal 设置为一个值，强制进行脏检查，然后再次将其设置为 null：

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

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

Answer 2

要清除 HTML 5 数字控件，您可以检查控件的状态，如果它无效，则将其值覆盖为空白。我已经用下面的代码更新了你的小提琴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='';
    }

  }
}

Answer 3

只要你在数字输入中输入 10，Angular 就会绑定 10，它就像 $scope.value = 10，但是当你触发点击事件时，你正在将值更改为 null，比如 $scope.value = null ，所以通过事件发送模型的值并将其绑定到您的变量。

<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>

还有 javascript 代码：

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

Answer 4

简而言之，因为e 和. 不是完整的合法数值。根据Foalting point number in W3 spec：

• 如果值以.开头，后面必须跟一个或多个“0—9”；
• 如果值以e开头，后面必须跟可选的+或-，以及一个或多个“0-9”

由于HTML检查没有通过，所以不会触发JS，和我想象的一样。如果继续输入.1或e45，就可以了。