Angular响应式表单异步验证器无法返回结果问题

你的代码核心问题是异步验证器的位置放错了，Angular中FormControl的验证器参数分同步、异步两类，不能把异步验证器和同步验证器混放在同一个数组里。

原代码问题点 #

你当前把this.createValidator()（异步验证器）和同步验证器（required、pattern等）一起放在了FormControl的第二个参数数组中，但Angular只会将第二个参数视为同步验证器处理，异步验证器需要单独放在第三个参数位置。

修正后的代码 #

payerGeneralInformationValidators = this.formBuilder.group({
        'payerName': ['', 
          [Validators.required, Validators.pattern('[a-zA-Z 0-9`~!@#$%^&,.\'\"*()_+-]*$'), Validators.maxLength(256)],
          [this.createValidator()] // 异步验证器移至第三个参数数组
        ],
        'aliasName': ['', []],
        'address1': ['', []],
        'address2': ['', []],
        'city': ['', [Validators.pattern('[a-zA-Z 0-9`~!@#$%^&,.\'\"*()_+-]*$')]],
        'state': ['', []],
        'zip': ['', [Validators.pattern(/^\d{5}(-\d{4})?$/)]],
    });

createValidator(): AsyncValidatorFn {
        return (control: AbstractControl): Observable<ValidationErrors> => {
          return of(true)
            .pipe(
              map((result: boolean) =>
                result ? null : { isOutsideState: true }
              )
            );
        };
      }

补充说明 #

• 若要测试验证失败的场景，只需把of(true)改为of(false)，此时验证器会返回{ isOutsideState: true }。
• Angular默认会在同步验证器全部通过后才执行异步验证器，这样能避免不必要的异步操作，符合验证流程逻辑。

内容的提问来源于stack exchange，提问作者Anna