Реактивные формы asyn c валидатор вызывается до заполнения компонентных переменных - PullRequest
Новая
       37

Реактивные формы asyn c валидатор вызывается до заполнения компонентных переменных

0 голосов
/ 08 апреля 2020

Итак, я пытаюсь подтвердить, если имя пользователя уже занято или нет в моей форме редактирования пользователя. Вот моя форма: 

editForm= new FormGroup({
                username: new FormControl('', [Validators.required, Validators.maxLength(60)], this.validateUser.bind(this)),
                fullName: new FormControl('', Validators.maxLength(60)),
                email: new FormControl('', Validators.maxLength(60)),
                phoneNumber: new FormControl('', Validators.maxLength(60)),
            }, { updateOn: "blur"});

В своем валидаторе я проверяю, изменилось ли исходное имя пользователя перед отправкой запроса на валидацию, сравнивая его с переменной, в которой информация пользователя загружена с сервера: 

validateUser(control: FormControl): Observable<ValidationErrors | null> {
    if(control.value != this.originUser.username){
        return this.userService.validateUsername(control.value).pipe(map(res => {
            return res['valid'] ? null : { invalidUsername: true};
        }));
    }
}

Все работает нормально, если я пытаюсь изменить имя пользователя на уже занятое другим пользователем, и я получаю сообщение об ошибке. Также, если после этого я изменяю его на исходное имя пользователя, оно также работает нормально, и запрос на проверку не отправляется.

Мой this.originUser заполняется в ngOnInit, и это происходит после первого вызова валидатора в форме. инициализация, поэтому я по-прежнему вижу отправленный запрос проверки с исходным именем пользователя и получаю сообщение об ошибке, когда форма загружается с исходным именем пользователя. 

ngOnInit() {
            this.userService.getOne(this.id).subscribe(user =>{
                this.editForm.patchValue({
                    username: user.username,
                    fullName: user.fullName,
                    email: user.email,
                    phoneNumber:user.phoneNumber
                });
                this.originUser = user;
            });
        }
    }

Я не могу понять logi c, как не отправлять запрос проверки при проверке вызывается впервые при открытии страницы «Редактировать пользователя»

UPD: Я понял, как не получить ошибку при загрузке формы, добавив this.editForm.get('username').updateValueAndValidity(); после загрузки this.originUser в ngOnInit, но при загрузке формы все еще отправляется ненужный запрос проверки.

1 Ответ

0 голосов
/ 08 апреля 2020

Таким образом, решение было довольно простым. Добавлено control.dirty к условию валидатора, чтобы запрос никогда не отправлялся, если пользователь не изменил ввод 

validateUsername(control: FormControl): Observable<ValidationErrors | null> {
    if(control.value != this.originUser.username && control.dirty){
        return this.userService.validateUsername(control.value).pipe(map(res => {
            return res['valid'] ? null : { invalidUsername: true};
        }));
    } else return of({});
}
...