angular js类型号在firefox中不起作用

Question

请检查此代码。

   <input type="number" name="input" ng-model="value"
                     min="0" max="99" required>

对于上述代码，我在 Firefox 中只获得了一个文本字段，而在 google chrome 中它的工作正常。

 <form name="myForm" ng-controller="Ctrl">
      Number: <input type="number" name="input" ng-model="value"
                     min="0" max="99" required>
      <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
      <span class="error" ng-show="myForm.input.$error.number">
        Not valid number!</span>
      <tt>value = {{value}}</tt><br/>
      <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
      <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
      <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
      <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
     </form>

Answer 1

Firefox 似乎不支持type="number"，但是，Angular 确实对 Firefox 进行了 polyfill，以便 type="number" 输入字段在 Firefox 中正确运行（在验证等方面）。

因此，您提供的代码应该在 Firefox 中正确验证。

但是，您不会像在 Chrome 中看到的那样看到小箭头：

要在 Firefox 中获得此效果，您可以使用 input number polyfill。

Here is a plunker 展示了这个 polyfill 的运行情况。