Firefox 无法使用 Angular 清除无效数字字段

Question

经过两个小时的研究和尝试，我无法在插入无效值时清除数字输入字段。我已经尝试将 ng-model 设置为 null、undefined 和 '' 但 none 正在工作。

只有 Firefox 有这个问题，我已经在最新版本的 Chrome 和 IE 上测试过。

我的简化代码是：

HTML

<div ng-controller="MyCtrl">
  <form name="frmToClear">
    <input type="number" name="numField" ng-model="numberModel">
  </form>
  <button ng-click="clearInput()">Clear input</button>
</div>

Javascript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.numberModel = null;

    $scope.clearInput = function() {
        $scope.numberModel = null;
    };
}

这是 fiddle，我还添加了一个 "setZero" 函数来表明将模型更改为有效的非空输入效果很好：https://jsfiddle.net/McGiogen/vhx87yq6/

重现

错误只是用 Firefox 打开 link，在输入字段中输入任何非数字字符串，然后按 "Clear input" 按钮。什么都不会发生。

已测试的浏览器：

火狐 40.0.3
Firefox 开发版 42.0a2
Chrome 45.0.2454.93
IE 11.0.9600.17959

Answer 1

用 '' 代替 null

function MyCtrl($scope) {
    $scope.numberModel = null;

    $scope.clearInput = function() {
        $scope.numberModel = '';
    };

    $scope.setZero = function() {
       $scope.numberModel = 0;
    };
}

Answer 2

在输入字段方面，跨浏览器之间存在许多问题。这篇文章可以为您提供所需的所有信息。

https://css-tricks.com/numeric-inputs-a-comparison-of-browser-defaults/

我会通过向用户显示一条消息告诉他们输入有效数字然后使用 Angular 的内置验证来防止错误输入来解决问题。

<div ng-controller="MyCtrl">
  <form name="frmToClear">
    <input required type="number" name="numField" ng-model="numberModel">
  </form>
  <div ng-show="!frmToClear.$valid">Please enter a valid number only</div>
  <button ng-click="clearInput()" ng-disabled="!frmToClear.$valid">Clear input</button>
  <button ng-click="setZero()" ng-disabled="!frmToClear.$valid">Set zero</button>
</div>

Answer 3

您可以尝试使用输入文本并通过自定义指令验证用户输入。

查看此 link 以获得更好的解释：

How to allow only a number (digits and decimal point) to be typed in an input?

如果你想允许 + 和 - 用类似的东西修改正则表达式：

[^0-9\-\.\+]

Firefox 无法使用 Angular 清除无效数字字段

Firefox can't clear invalid number field with Angular

angularjs

input

numbers

reset

重现

已测试的浏览器：