Angular自定义异步表单验证

1.自定义一个异步的表单验证器

<form [formGroup]="userForm">
<input type="text" formControlName = "name">
<button (click)="form.reset()">Resetbutton>
form>

//第一个参数是初始值， 第二个参数是同步验证器，第三个是异步验证器
const nameControl = new FormControl(' ', [Validators.required], [this.nameAsyncValidator] );
this.userForm = new FormGroup([
name:nameControl
])
//异步验证方法
nameAsyncValidator = (control: AbstractControl ): Observable<{ nameAsync: boolean} | null> =>{
if (control.value === 'admin'){
  return of({nameAsync: true})
}else{
  return of(null);
}
} 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.提醒：使用form的reset()方法的时候,会把表单里的每一项值都放为空，而表单中input表单的初始值是‘ ’，所以调用reset方法会有问题。需要给FormControl里面加参数（noNullable: true）。

<form [formGroup]="userForm">
<input type="text" formControlName = "name">
<button (click)="form.reset()">Resetbutton>
form>
//改前:
const nameControl = new FormControl(' ', [Validators.required], 
this.nameAsyncValidator );
//改后:
const nameControl = new FormControl(' ', 
{nonNullable: true,
validators: [Validators.required], 
asyncValidators: [this.nameAsyncValidator]} );

this.userForm = new FormGroup([
name: nameControl
])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16