数字输入字段失去对验证更改的关注

Question

当验证状态从无效变为有效时，当前输入字段在 Firefox 上失去焦点 (Minimum working example in jsFiddle)：

<div ng-repeat="elem in list track by $index">
    <ng-form name='innerform'>
        <input name="id" type="number" ng-model="elem.id" required/>
        <div ng-if="innerform.id.$error.required">Required!</div>
    </ng-form>
</div>

这种行为似乎发生在仅限 Firefox 和只有“数字”类型的输入字段。将其更改为“文本”或使用 Chrome 即可正常工作。

我在这里做错了什么还是 AngularJS 或 FireFox 中的错误？

Answer 1

这是 Firefox 在将块插入内联元素时的错误，而不是在 AngularJS 中。 即将推出的 FF 版本的修复程序已经在进行中：https://bugzilla.mozilla.org/show_bug.cgi?id=1045270

同时，caitp 在https://github.com/angular/angular.js/issues/8365 上提出了一个很好的解决方法：

添加 style="display: block;"或 style="display: inline-block;" （或者只是将这些添加到 CSS 文件或样式标签中）用于受影响的元素（在原始问题的情况下，ng-form）--- 或者，在块元素上使用 ng-form 属性。

Answer 2

这个问题的出现主要是因为 type="number"。将其更改为 type="email" 或其他它可以正常工作。

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

为了让它工作，它使用输入数字 polyfill。 SEE HERE

SEE RELATED QUESTION HERE