Question

我想对是否已使用电子邮件进行一些即时验证？我可以检查电子邮件是否在使用中，并进行其他检查，例如确保输入字段不为空或格式错误。

但是，我希望在电子邮件不可用的地方（在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);
        }
      });
  }

输入字段应变为无效（红色）并显示相应的消息。

Answer 1

如果我正确理解了这一点，则需要一个异步验证器。这样您就可以通过异步操作（例如API调用）来验证值。您也可以将其与其他验证器结合使用。

请找到这篇很好的文章，它解释了- https://engineering.datorama.com/implementing-async-validators-in-angular-reactive-forms-fdf67c3d0e12

更多详细信息-

https://angular.io/guide/form-validation#async-validation

我希望这会有所帮助。

使用Angular材质进行自定义验证

1 个答案: