为什么当number的值在AngularJs中非法输入时，绑定到null不能工作?

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

本文关键字：绑定 null 工作 不能 输入 非法 number AngularJs 为什么      更新时间：2023-09-26

示例如下: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仍然有效。

那么，为什么在这种情况下视图没有得到update(empty) ?

另外，还有其他清空的方法吗?

要清除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='';
    }
  }
}

简而言之，因为e和.不是完整的合法数值。根据W3规范中的倒衬点编号:

  • 如果值以.开头，必须后跟一个或多个"0-9";
  • 如果以e开头，后面必须跟着可选的+或-，以及一个或多个"0-9"

由于HTML检查没有通过，所以它不会触发JS，正如我想象的那样。如果您继续输入.1或e45，它可以工作

只要你在Number Input中输入10,Angular就会绑定10，它就像$scope一样。Value = 10，但是当您触发click事件时，您将值更改为null，如$scope。Value = null，因此通过事件发送model的值并将其绑定到变量。

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

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

当输入非法时，

模型没有值。所以$scope.value = null或$scope.value = ''不能工作，因为它们也是非法值。

模型值和视图值都是未定义的，所以angular没有更新视图。

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

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

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

相关文章：