时间戳

首页 > 解决方案 > Angular 5：用于多个电子邮件字段验证的 BehaviourSubject

angular - Angular 5：用于多个电子邮件字段验证的 BehaviourSubject

问题描述

我在 Angular5 上工作，我的项目页面有一个上传功能，我将在其中使用core我自己组织的上传组件。用户可以上传 5 个文件，在单击upload按钮之前，用户必须填写电子邮件字段。

我的要求是，一旦用户离开email现场，就会进行服务调用，并根据服务响应显示错误消息。

我这样做如下：

我的组件 HTML

<my-upload-compt (validateEmail)="checkEmail($event)" [isEmailValid]="isEmailValid"></my-upload-compt>

我的组件 TS

isEmailValid: BehaviourSubject<boolean>;

checkEmail($event){
    // make service call, suppose the service returns false.
    this.isEmailValid.next(false);
}

核心组件 TS

@Input() isEmailValid: BehaviourSubject<boolean>

ngOnInit(){
    this.isEmailValid.subscribe(value => {
    // show error msg
});
}

我的问题是，如果我在第一个字段中输入有效的电子邮件，在下一个字段中输入无效的电子邮件，即使第一个字段也会显示错误消息。焦点完成后如何显示特定字段的错误消息？请指导。

PS：关注焦点的函数调用工作正常，只是所有字段都开始显示错误，即使 1 个字段有错误的电子邮件

标签： angulartypescriptangular5

解决方案

这是 Angular Reactive 表单和AsyncValidatorFn的完美用例。通过使用它，您将能够实现每个字段所需的行为。

推荐阅读