带有异步验证器的 Angular FormControl 保持待处理状态

Question

当我添加没有同步验证器的异步验证器时，我的表单无法正常工作。

当我将异步验证器与同步验证器添加在一起时，表单可以正常工作

name: new FormControl(
            '',
            Validators.required,
            this.validate.bind(this)
          ),

但是当我删除同步验证器时，表单不再起作用，即其他所需的控件未触发

 name: new FormControl(
                '',
                null,
                this.validate.bind(this)
              ),

这是验证 fn

 private validate(control:AbstractControl):Observable<ValidationErrors> {
return control.valueChanges.pipe(
      debounceTime(500),
      distinctUntilChanged(),

      switchMap((value: boolean) => {
        //some logic
        return of(null);
}

请注意，按照某些帖子中的建议使用first()和take(1)是行不通的。 当我在同步验证器上添加 Validator.required 时，一切正常

Answer 1

遵循此线程后我能够解决此问题 https://github.com/angular/angular/issues/13200

解决方案包括当控件是 prestine 或没有 valueChanges 时使用 take(1) 返回 null observable，以确保 validate() fn 中返回的 observable 是有限的。

    private validate(control:AbstractControl):Observable<ValidationErrors> {
     if (!control.valueChanges || control.pristine) {
          return of(null);
        } else {
    return control.valueChanges.pipe(
          debounceTime(500),
          distinctUntilChanged(),
          take(1),
          switchMap((value: boolean) => {
            //some logic
            return of(null);
    },
}

Answer 2

当我有一个默认禁用的字段时，就会发生这种情况。

我在启用该值的同时修补了该值。

无论出于何种原因，这都完全破坏了 asyncValidator。

如果您修补该值，并同时将其设置为启用，请尝试以下操作：

this.form.patchValue({ field1: 'test' });

setTimeout(() => { this.form.controls.field1.enable(); }