Question

我在Firefox中遇到了一个奇怪的问题，我希望有人可以向我解释。我有一个AngularJS控制器，其方法与表单中的各种输入控件绑定ng-change，包括一个标记为number输入的控件。此方法的逻辑是，如果正确设置了任何一个绑定范围变量，则将另一个范围变量设置为true。这基本上是一种表单验证的尝试，其中需要任何一个（或多个）输入。

示例：

app.controller('test', function($scope) {
  $scope.num = 0;
  $scope.name = "";
  $scope.valid = false;

  $scope.inputChange = function() {
    console.log('Input changed');
    $scope.valid = ($scope.num > 0) || ($scope.name.length > 0);
  }
});

并形成：

<form name="numberTest" ng-app="myApp" ng-controller="test">
      <input ng-model="name" name="name" type="text" ng-change="inputChange()"/>
      <input type="number" ng-model="num" name="n" id="n" ng-change="inputChange()"/>
      <input type="button" value="Go" ng-disabled="!valid"/>
</form>

这在Chrome中运行良好，但在Firefox中，当在数字输入中输入非数字文本并且文本框本身确实在其中获取此伪造数据时会触发此ng-change处理程序，尽管模型未更新。这导致了一个令人困惑的状态，其中num文本框中的无效数据未绑定到AngularJS模型，但用户可以单击该按钮。 Chrome不会出现此问题，因为它不会在输入控件中呈现非数字数据。

如何检测（和处理）此方案？输入控件显示的文本无效且未绑定到绑定模型。

我当然愿意接受其他实现来实现同样的效果。 AngularJS版本是1.3.0。

示例plunker在Firefox中运行以查看“错误”行为

Answer 1

我最终发现了这些数字输入的$valid属性，这似乎满足了我的需求：

如果为空
如果非数字数据在控件中

所以，我的更新按钮：

<input type="button" value="Go" ng-disabled="!valid || !numberTest.n.$valid"/>

通过AngularJS处理Firefox中的数字输入

1 个答案: