Question

我想创建自我使用

的自定义验证

[hidden]="email.valid && email.untouched"

等等，对我来说还不够。我想显示不同的消息： 1.电子邮件无效，2。需要电子邮件。

现在，当表单被加载时，我没有显示验证消息，这很好，但问题是当我想在打字期间显示/隐藏消息或在字段外点击时。

我需要什么：

在输入过程中，当输入字段处于焦点时，不显示验证消息。
一旦我输入“example @ gmail”，然后在字段外单击，我想显示电子邮件无效的验证消息，但是当我再次点击该字段以恢复输入时，我想删除该消息，直到我再次退出输入字段。
当我删除内容“example @ gmail”时，我想显示消息“需要电子邮件”，并在我关注字段时再次隐藏它

我知道很多，但我真的可以使用自定义验证的帮助。我使用模式进行电子邮件和有效/原始/触摸，但我无法得到我需要的。

Answer 1

对于角4及以上：

According to This you can use "email validator".

Example:

If you use template-driven forms:

<input type="email" name="email" email>
<input type="email" name="email" email="true">
<input type="email" name="email" [email]="true">

如果您使用模型驱动的表单（又名ReactiveFormsModule），请使用Validators.email：

this.myForm = this.fb.group({
    firstName: ['', [<any>Validators.required]],
    email: ['', [<any>Validators.required, <any>Validators.email]],
});

自定义验证Angular2

1 个答案: