1

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

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

它包含两个指令:

  • ngFocus:能够获得任何输入是否聚焦或模糊的信息。它还关注一个hasVisited变量,以避免blur在用户至少一次没有到达时验证输入。
  • emailUnique:执行与已经存在的邮件(硬编码)的简单比较,以便能够验证或不验证email输入。

重点是:(不要忘记将“tab”触摸以blur执行功能以查看字段的验证错误)

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

问题:如何处理最后一种情况?

我有两个假设:

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

1 回答 1

2

只需从您的解析器函数中删除此代码段:

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

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

有了这个片段,它下面的代码(进行比较)只会在控件有效时运行,但如果控件无效则永远不会运行。

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


编辑(更好的选择):

如果您不想在电子邮件字段对其他规则(“必需”和“电子邮件”)无效时执行比较,那么您还需要检查ctrl.$error. 不要删除上面提到的代码段,只需将其更改为:

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

这样,只有当控件无效但由于其他规则(不是 emailUnique 规则)时,它才会返回。

更新的 plunker:http ://plnkr.co/edit/IDQitVkeHHDyJlcsatMy?p=preview

于 2013-10-11T10:15:49.840 回答