对Angular 2的输入字段模糊的反应式表单验证

Question

我正在使用formControl验证来验证输入字段，如required，minlength，email等。

＆＃34; valueChanges＆＃34;对我来说效果很好，但是我想对输入字段的模糊使用验证。我想要这个，因为用户开始输入电子邮件地址并且在用户完成电子邮件地址之前使用验证器的电子邮件验证不是非常用户友好，验证错误弹出窗口。所以我想对输入电子邮件地址的模糊进行电子邮件验证。

非常感谢任何帮助。

Answer 1

您不应该使用valueChanges observable来执行自己的验证。而是创建自己的自定义验证器并将它们分配给它们的formControls。因此，根据验证器，您的控件将始终有效/无效，但在您的模板中，在ngIf指令的帮助下，一旦控件无效且脏或触摸，您将能够显示错误消息。

xxx.component.html

<input type="text" formControlName="email"> <div *ngIf="form.get('email').errors?.required">The email is required</div> <div *ngIf="form.get('email').errors?.email">The email is invalid</div>