如何实现angular 8 版本以上的异步验证

文章列表

在Angular 8及以上版本中，可以使用异步验证器来进行异步验证。异步验证器是指在表单验证过程中，使用一个异步操作（比如HTTP请求）来检查控件的有效性。

在Angular中，异步验证器是一个函数，它接收一个控件作为参数，并返回一个Promise或Observable对象。如果该Promise或Observable对象解决为null或undefined，则表明该控件是有效的；否则，表明该控件是无效的，并且返回的值表示无效原因。

下面是一个例子，演示如何使用异步验证器来验证一个输入框中的用户名是否已经被占用：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators, AsyncValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';@Component({selector: 'app-user-registration',template: `<form [formGroup]="registrationForm"><label for="username">Username:</label><input id="username" name="username" formControlName="username" /><div *ngIf="username.pending">Checking username availability...</div><div *ngIf="username.hasError('serverError')">Error checking username availability</div><div *ngIf="username.hasError('usernameTaken')">Username has already been taken</div></form>`,
})
export class UserRegistrationComponent {registrationForm: FormGroup;constructor(private fb: FormBuilder) {this.registrationForm = this.fb.group({username: ['', [Validators.required], this.asyncUsernameValidator()]});}asyncUsernameValidator(): AsyncValidatorFn {return (control: AbstractControl): Observable<ValidationErrors | null> => {return this.checkUsernameAvailability(control.value).pipe(map(res => {if (res.isTaken) {return { usernameTaken: true };} else {return null;}}));};}checkUsernameAvailability(username: string): Observable<{ isTaken: boolean }> {return new Observable(observer => {setTimeout(() => {if (username === 'takenUsername') {observer.next({ isTaken: true });} else {observer.next({ isTaken: false });}observer.complete();}, 2000);});}get username() {return this.registrationForm.get('username');}
}

在这个例子中，我们创建了一个名为asyncUsernameValidator的异步验证器函数，并在用户名输入框的validators中使用它。在这个异步验证器中，我们调用了checkUsernameAvailability方法来检查用户名是否已经被占用。该方法返回一个Observable对象，它在2秒内解决为一个对象，包含isTaken属性，表示该用户名是否已经被占用。使用pipe和map运算符，我们将该Observable对象映射为一个ValidationErrors对象，其中含有一个usernameTaken属性，表示用户名已经被占用。如果用户名没有被占用，则返回null。

在模板中，我们使用了一个*ngIf指令来显示异步验证状态和错误信息：

<label for="username">Username:</label>
<input id="username" name="username" formControlName="username" />
<div *ngIf="username.pending">Checking username availability...</div>
<div *ngIf="username.hasError('serverError')">Error checking username availability</div>
<div *ngIf="username.hasError('usernameTaken')">Username has already been taken</div>

现在用户输入框会在用户输入时实时验证用户名是否被占用，显示相关的错误信息。当用户输入用户名"takenUsername"时，会显示"Username has already been taken"。

如何使用同步验证器和异步验证器来验证表单的有效性

可以使用同步和异步验证器来确保表单控件和表单本身的有效性。同步验证器在控件值发生变化时同步检查控件的有效性，而异步验证器则允许在控件值变化后进行异步操作（如HTTP请求）来检查控件的有效性。

在Angular中，我们可以使用FormControl类来创建表单控件，并使用Validators类提供的预定义验证器进行同步验证。例如，Validators.required可以用来验证一个控件是否填写了值。

对于异步验证器，我们可以使用AsyncValidatorFn类型的函数来实现。这个函数接收一个FormControl对象作为输入，并返回一个诸如Promise、Observable等异步对象。异步验证器异步获取数据并对表单进行验证。如果异步验证成功，则返回null，否则返回包含一个错误值的ValidationErrors对象。如果有多个异步验证器并行运行，可以使用Validators.compose([])将它们组合起来。

下面是一个完整的例子，演示了如何使用同步和异步验证器来检查表单的有效性：

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, AsyncValidatorFn, AbstractControl, ValidationErrors, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';@Component({selector: 'app-signup-form',template: `<form [formGroup]="signupForm" (ngSubmit)="onSubmit()"><label for="signup-email">Email:</label><input id="signup-email" name="email" formControlName="email" /><div *ngIf="email.invalid && (email.dirty || email.touched)"><div *ngIf="email.errors.required">Email is required</div><div *ngIf="email.errors.email">Invalid email address</div><div *ngIf="email.errors.serverError">Error checking email availability</div><div *ngIf="email.errors.emailTaken">Email has already been taken</div></div><label for="signup-password">Password:</label><input id="signup-password" name="password" type="password" formControlName="password" /><div *ngIf="password.invalid && (password.dirty || password.touched)"><div *ngIf="password.errors.required">Password is required</div><div *ngIf="password.errors.minlength">Password must be at least 6 characters long</div></div><button type="submit" [disabled]="signupForm.invalid">Sign up</button></form>`,
})
export class SignupFormComponent implements OnInit {signupForm: FormGroup;constructor(private fb: FormBuilder) { }ngOnInit() {this.signupForm = this.fb.group({email: ['', [Validators.required, Validators.email], this.asyncEmailValidator()],password: ['', [Validators.required, Validators.minLength(6)]]});}asyncEmailValidator(): AsyncValidatorFn {return (control: AbstractControl): Observable<ValidationErrors | null> => {return this.checkEmailAvailability(control.value).pipe(map(res => {if (res.isTaken) {return { emailTaken: true };} else {return null;}}));};}checkEmailAvailability(email: string): Observable<{ isTaken: boolean }> {// Simulate an HTTP request to check email availabilityreturn new Observable(observer => {setTimeout(() => {if (email === 'taken@example.com') {observer.next({ isTaken: true });} else {observer.next({ isTaken: false });}observer.complete();}, 2000);});}get email() {return this.signupForm.get('email') as FormControl;}get password() {return this.signupForm.get('password') as FormControl;}onSubmit() {console.log('Form submitted:', this.signupForm.value);}
}

在这个例子中，我们使用Validators.email和Validators.required来对email控件进行同步验证。对于异步验证，我们使用了asyncEmailValidator函数来对email控件进行异步验证，该函数返回一个AsyncValidatorFn类型的函数。

在这个异步验证器中，我们调用了一个名为checkEmailAvailability的方法来检查email的可用性。checkEmailAvailability方法返回一个Observable对象，该对象表示针对email的异步操作是否成功。在该方法中，我们使用setTimeout函数模拟了一个HTTP请求，并在2秒后以Observable对象的形式返回该操作的成功或失败结果。通过pipe和map，我们将异步事件映射为ValidationErrors对象，并根据email的可用性设置相应的错误消息。

在

如何实现angular 8 版本以上的异步验证