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

Handle Number Input in Firefox via AngularJS

本文关键字:数字输入 Firefox AngularJS 处理 通过      更新时间:2023-09-26

我在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 中运行以查看"不良"行为

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

  • 如果为空,则返回 true
  • 如果控件中存在非数字数据,则返回 false

所以,我更新的按钮:

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