Angular 使用角度材质的自定义验证

我想做一些即时验证，如果电子邮件已被使用或没有？我让它工作，以检查电子邮件是否正在使用，并有其他检查，如确保输入字段不是空的，或在不正确的格式

但是，我想让它显示（在html端）在现场的电子邮件是不可用的

public email = new FormControl('',[Validators.required,Validators.email]);
public emailValid:boolean;


ngOnInit() {
    this.thisForm=this.formBuilder.group({
      email: this.email,})}

<mat-form-field>
    <input matInput placeholder="Email" formControlName='email' (change)='checkEmail($event)'>
    <mat-error *ngIf="email.invalid">{{UnavailableEmail()}}</mat-error>
  </mat-form-field>


UnavailableEmail()
  {
    if(this.email.hasError('required'))
    {
      return "Please enter value"; //works
    }
    else if(this.email.hasError('email'))
    {
      return "Incorrect email format";//works
    }
    else if(this.emailValid==false){
      console.log('email in use');//works
      return "Email in use";<-- doesn't display like I want it to
    }
  }

checkEmail(e:any) //Ignore
  {this.emailValid=false;
    let param:iEmailCheck={
      email:e.target.value,
    }
    this.service.CheckEmail(param).subscribe(val=> //returns a count
      {
        if(val[0].numofemail>=1)
        {this.UnavailableEmail();
        }
        else{
          this.emailValid=true;
          console.log(this.emailValid);
        }
      });
  }

public email=newformcontrol（“”，[Validators.required，Validators.email]）；
public-valid:boolean；
恩戈尼尼特（）{
this.thisForm=this.formBuilder.group({
电子邮件：this.email，}）
{{UnavailableEmail（）}}
不可用的电子邮件（）
{
if（this.email.hasError（'required'））
{
返回“请输入值”；//工作
}
else if（this.email.hasError（'email'））
{
返回“不正确的电子邮件格式”；//有效
}
else if（this.emailValid==false）{
console.log（'email in use'）；//有效
返回“Email in use”如果我理解正确，您需要一个异步验证器。这将允许您使用异步操作（如API调用）来验证值。您也可以将其与其他验证器结合使用

请找到这篇好文章，它解释了-

有关更多详情，请参阅：


我希望这会有帮助