angular表单之验证器

一，自定义验证器

1. 验证器可以通过setAsyncValidators手动设置

   this.form = this.fb.group({ myControl: [''] });
   this.form.reset(); 
   this.form.get('myControl').setAsyncValidators(this.customAsyncValidator); 
   this.form.get('myControl').updateValueAndValidity();
   

2. 验证器类型

// 异步验证器
costumeValidator(): ValidatorFn {
   return (
     control: AbstractControl,
   ): Observable<{ [key: string]: any } | null> => {
     return new Observable((observer) => {
       // 根据接口数据listData会得到最新数据
       const isExsit = this.listData?.some((i) => i.code === control.value);
       console.log(this.listData, '----------');
       if (!isExsit) {
         observer.next(null);
       } else {
         observer.next({ costumeValidator: { value: control.value } });
       }
       observer.complete();
     });
   };
 }

// 同步验证器
customValidator = (control: AbstractControl): { [key: string]: any } | null => {   
    console.log(this.listData); 
    const isExsit = this.listData?.some((i) => i.code ===  control.value); 
    return !isExsit ? null : { costumeValidator: true }; 
};