自定义验证 Angular2

Question

我想创建自定义验证，因为我使用的验证

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

和其他，对我来说还不够。我想显示不同的消息： 1. 电子邮件无效和 2. 电子邮件是必需的。

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

我需要什么：

1. 在输入过程中，当输入字段处于焦点时，不显示验证消息。
2. 一旦我输入 "example@gmail" 并在字段外单击，我想显示电子邮件无效的验证消息，但是当我再次单击该字段以继续输入时，我想删除该消息，直到我再次退出输入字段。
3. 当我删除内容“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]],
});