Javascript 如何为角度验证添加多个规则并使用ng:invalid

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

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

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

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

做这件事的“角度方法”是什么

---

编辑：我可以使用ng invalid required解决部分问题。但是，对于同一字段上的多个其他规则，问题仍然存在。

默认情况下，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仅涵盖一些开箱即用的场景。为了满足最终需求，您需要编写一个自定义验证。这将使您朝着正确的方向前进：