javascript - 如何添加多个 Angular 验证规则并使用 ng :invalid

Question

我有一个带有字段的表单，当该元素具有 ng:invalid 时，我将显示另一个包含错误消息的表单(这是一个工具提示)。

但是，我需要让该工具提示根据字段无效的原因显示不同的消息。例如:

• 如果用户未输入任何值，则应显示“必填”
• 如果用户未输入有效的电子邮件地址，则应显示“请输入有效的电子邮件地址”
• 如果用户输入了存在的电子邮件地址(例如在本地数组中)，那么它应该显示不同的消息..等等。

由于即使其中一个规则失败也会设置 ng:invalid，因此我需要一种方法来区分规则并识别失败的规则，然后根据该规则设置工具提示的 HTML。

执行此操作的“Angular 方式”是什么？

编辑:我能够使用 ng-invalid-required 解决部分问题。但对于同一领域的多个其他规则，问题仍然悬而未决。

Answer 1

默认情况下，AngularJS 公开一个 $error 对象，您可以使用它来获取有关错误的更多信息。请参阅以下示例:

<form name="userForm">
<input id="userEmail" name="userEmail" type="email" data-ng-model="userEmail">

<div class="alert alert-errors" data-ng-show="userForm.userEmail.&dirty && userForm.userEmail.&invalid">
  <p data-ng-show="userForm.userEmail.$error.required">Email is required.</p>
  <p data-ng-show="userForm.userEmail.$error.email">Please enter a valid email address.</p>
<div>
</form>

Angular 仅涵盖一些开箱即用的场景。为了满足您的最终要求，您将需要编写自定义验证。这应该会让您朝着正确的方向前进:https://docs.angularjs.org/guide/forms