AngularJS /验证电子邮件唯一性时的奇怪行为

Question

我有一个由 Angular 控制的表单，我希望它能够意识到潜在的重复用户电子邮件。

我关心的代码在那里：http://plnkr.co/edit/XQeFHJTsgZONbsrxnvcI

它包含两个指令：

• ngFocus：能够获得任何输入是否聚焦或模糊的信息。 它还关注hasVisited 变量，以避免在用户至少一次未访问blur 时验证输入。
• emailUnique：与已经存在的邮件（硬编码）进行简单比较，以便能够验证email 输入。

重点是：（不要忘记将“tab”触摸以执行blur函数以查看字段的验证错误）

• 如果我不输入任何内容并转到名称输入（以模糊电子邮件输入），它会显示：该字段是必需的。很好。
• 如果我输入了一个无效的电子邮件，例如字符串“ferfergre”，它会显示：此电子邮件无效。。很好。
• 如果我输入了与现有硬编码电子邮件不同的有效电子邮件：(michael@gmail.com)，则不会显示错误。很好。
• 如果我输入现有邮件：michael@gmail.com，它会显示：此电子邮件已存在。。这很好，因为它会发出警告。
• 但是，如果在 DOM 周期中至少有一次电子邮件被判断为“此电子邮件已存在”，那么即使我将其更改为新的有效电子邮件，此错误仍然存​​在...

问题：最后一种情况如何处理？

我有两个假设：

• HTML 属性的顺序很重要：autofocus email-unique ng-focus required
• emailUnique 指令代码中的setValidity 方法避免ctrl 再次成为$valid，然后阻止再次执行邮件比较。

Answer 1

只需从解析器函数中删除这个 sn-p：

if(!ctrl.$valid){
    return viewValue;
}

此代码阻止再次执行邮件比较。

有了这个 sn-p，它下面的代码（进行比较）只会在控件有效时运行，但如果控件无效则永远不会运行。

更新的插件：http://plnkr.co/edit/6q3cANiFI4vpWcVEHRvo?p=preview

---

编辑（更好的选择）：

如果您不想在电子邮件字段对其他规则（“必填”和“电子邮件”）无效时执行比较，那么您还需要检查@ 987654324@。而不是删除上面提到的sn-p，只需将其更改为：

if(!ctrl.$valid && !ctrl.$error.emailUnique){
    return viewValue;
}

这样，它只会在控件无效但由于 other 规则（不是 emailUnique 规则）而返回。

更新的插件：http://plnkr.co/edit/IDQitVkeHHDyJlcsatMy?p=preview