异步表单验证后自动调用方法 angular 8

Question

有没有像 checkValidity() 这样自动 调用方法 来设置 { 'invalid': false/true } 在异步表单验证之后（即我有 this.uniqueNameValidator.bind(this)) 异步调用）

已检查，但似乎是在提交点击操作后调用提交方法

已尝试 Form.valueChanges 未按预期工作它在验证之前被调用

this.editForm.valueChanges
            .pipe(takeUntil(this._onDestroy))
            .subscribe(changes => {
                if (changes) {
                    this.onChange(Object.assign({userId: this.userId}, changes));
                }
                this.checkValidity(); <-- This part is not working as expected it is called before validation
            });



checkValidity() {
        if (((this.editForm.controls.userName.pristine && this.editForm.controls.userName.pending) ||
            !this.editForm.controls.userName.invalid)
            && !this.editForm.controls.password.invalid) {
            this.editForm.setErrors({ 'invalid': false });
        } else {
            this.editForm.setErrors({ 'invalid': true });
        }
    }

this.editForm = new FormGroup({
              userDisplayName: new FormControl({ value: '', disabled: true }),
              userName: new FormControl('', [ Validators.required], 
                       this.uniqueNameValidator.bind(this)), <-- async Validation
              password: new FormControl('',[Validators.required,
                       validateUserPassword()])});


uniqueNameValidator(control: AbstractControl) {
        return control.valueChanges.pipe(
            switchMap(() => this.service.checkUsernameAvailability(control.value)),
            take(1),
            map(({data}) => {
                control.markAsTouched();
                this.componentChangeDetector.markForCheck();
                return data.checkUsernameAvailability ? null : {invalid: false};
            }), catchError((error): any => {
                return of(null);
            }));
    }

任何帮助都会很棒。

Answer 1

AbstractControl提供了两个ObservablesvalueChanges和statusChanges，也许这些可以帮助你。

异步表单验证后自动调用方法 angular 8

Call method automatically after async form validation angular 8

angular

angular-validation

angular-reactive-forms