Метод вызова автоматически после проверки асинхронной формы angular 8

Можно ли вообще вызвать метод автоматически, например, checkValidity(), чтобы установить { 'invalid': false/true } после проверки асинхронной формы (т.е. у меня есть this.uniqueNameValidator.bind( это)) асинхронный вызов)

Проверено https://stackoverflow.com/a/49520534/1225526, но это похоже на вызов метода отправки после действия отправки щелчка.

Попытка 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);
            }));
    }

Любая помощь будет здорово.


person Karthigeyan Vellasamy    schedule 12.11.2019    source источник
comment
вы можете сделать это в своей асинхронной функции проверки. добавьте tap() в свой круг и установите ошибку родительской формы следующим образом: tap(()=>control.parent.setErrors({'invalid':true}))...   -  person Eldar    schedule 12.11.2019
comment
У меня есть вопрос. Зачем вам устанавливать ошибки editForm. Если какая-либо проверка не пройдена, editForm.valid возвращает значение true или false. Зачем вам явно вызывать checkValidity и делать это?   -  person Saloo    schedule 12.11.2019
comment
Я использую ControlValueAccessor в качестве дочерней формы для записи других бизнес-данных + данных формы, которые являются экземпляром FormArray. Мне нужно, чтобы эта дочерняя форма была проверена вручную, так как я передаю эти FormControl этому дочернему компоненту для настройки проверки проверки, чтобы я мог повторять это formArray от родителя и включите кнопку отправки после проверки их достоверности. Часть этого поля формы предварительно заполнена, поэтому она остается в ожидании.   -  person Karthigeyan Vellasamy    schedule 12.11.2019


Ответы (1)


AbstractControl предоставляет два Observables valueChanges и statusChanges, возможно, они могут вам помочь.

person SourceCodeBot    schedule 12.11.2019
comment
Я использовал форму statusChanges с setTimeout, это сработало. this.editForm.statusChanges.pipe(takeUntil(this._onDestroy)) .subscribe(status =› this.checkValidity()); - person Karthigeyan Vellasamy; 21.11.2019