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 或没有使用 take(1) 的 valueChanges 时返回一个 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);
    },
}

Angular 具有异步验证器的 FormControl 保持待定状态

Angular FormControl with async validator stays in pending status

typescript

angular

angular-forms