让AngularJS识别浏览器已经检测到的无效输入的推荐解决方案

Recommended solution to get AngularJS to recognize invalid input already detected by the browser?

本文关键字：无效 输入 解决方案 检测 识别 AngularJS 浏览器      更新时间：2023-09-26

我有一个问题(在Chrome中)，其中一个数字输入被浏览器确定为无效，但根据Angular是有效的。

<form name="form_name">
    <input type="number" step="any" id="a_number" name="a_number" min="0"
        ng:model="aNumber"/>
    <button type="button" ng:disabled="form_name.$invalid">Label</button>
</form>
  1. 如果我输入5，它会通过Angular和浏览器的验证，使按钮处于启用状态。
  2. 如果我输入-5, Angular和浏览器的验证都会失败，禁用按钮。
    3. 然而，如果我输入像-或5.a这样的东西，它会使浏览器的验证失败，允许我指示和错误，但不会使Angular的验证失败，使按钮处于启用状态!

在JSFiddle.net上运行

我认为Angular的验证永远不会被调用，因为浏览器在检测到错误后不会触发任何其他事件。有一个invalid事件，但它只在表单提交或checkValidity()被调用之后发出。如果我将输入更改为文本输入，并为浮点数添加pattern, Angular就能够接收到正确的事件，并确定验证失败;但是，我必须将输入类型保留为number，以辅助电话软键(这种解决方法将完全忽略Angular无法检测表单错误的更大问题)。

那么，我应该有一个指令:

  1. 为像keyup这样手动调用checkValidity()的事件附加一个监听器，
  2. 为invalid添加一个监听器来手动设置Angular的有效性，并且
    3. 为change附加一个内部监听器来手动清除Angular的有效性?
你的解决方案是什么?

我认为你可以取消浏览器验证，使用angular验证

<form action="" novalidate>

novalidate将帮助您删除浏览器验证

相关文章：