Угловой пользовательский валидатор не отражает изменений в представлении

Question

Угловой пользовательский валидатор не отражает изменений в представлении

1

У меня есть пользовательский валидатор:

export class PasswordValidator {
    static MatchPassword(AC: AbstractControl) {
        const formGroup = AC.parent;

        if(formGroup) {
            let password = formGroup.value.password // to get value in input tag
            let confirmPassword = formGroup.value.confirmPassword; // to get value in input tag
            if(password != confirmPassword) {
                formGroup.get('confirmPassword').setErrors({ matchPassword: true });
            } else {
                formGroup.get('confirmPassword').setErrors(null);
            }
            console.log(formGroup.get('confirmPassword').errors);
        } else {
            return null
        }
     }
}

И я добавил к форме:

this.registerationForm.addControl("confirmPassword", new FormControl('', Validators.compose([Validators.required, PasswordValidator.MatchPassword])));

И в Вид:

  <ion-item class="error-message" *ngIf="registerationForm.controls.confirmPassword.hasError('matchPassword') 
    && registerationForm.controls.confirmPassword.touched">
    <p>Some message*</p>
  </ion-item>

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

DotNet Dreamer 02 май 2018, в 13:57

Источник

Теги:

angular

javascript

ionic-framework

angular-forms

1 ответ

Ещё вопросы

Sagar Kharche · Answer 1 · 2018-05-02T09-27-00.000Z

Используйте функцию detectChanges(), когда вы обновили модель после того, как угловые запустили ее изменение обнаружения, или если обновление не было в угловом мире вообще.

Используйте markForCheck(), если вы используете OnPush, и вы обходите ChangeDetectionStrategy, изменяя некоторые данные или обновляя модель внутри setTimeout;

export class PasswordValidator {
static MatchPassword(AC: AbstractControl) {
    const formGroup = AC.parent;

    if(formGroup) {
        let password = formGroup.value.password // to get value in input tag
        let confirmPassword = formGroup.value.confirmPassword; // to get value in input tag
        if(password != confirmPassword) {
            formGroup.get('confirmPassword').setErrors({ matchPassword: true });
        } else {
            formGroup.get('confirmPassword').setErrors(null);
        }
        console.log(formGroup.get('confirmPassword').errors);
        this.ref.markForCheck();
    } else {
        return null
    }
 }
}

добавьте this.ref.markForCheck(); после того, как вы обновите форму.

Как я собираюсь ввести это в этот статический метод?
У вас есть jsFiddle, созданный для того же?
я не думаю, что это проблема с обнаружением изменений. Я уже в угловой области. Чего-то не хватает
import {ChangeDetectorRef} из '@ angular / core'; И введите его в MatchPassword, как вы это делали для AC. Я думаю, что это должно работать, у меня была та же самая проблема и решена из-за этого. Дай попробовать.
Не могу ввести это. Его простой статический класс. По этой статье это должно работать без него. scotch.io/@ibrahimalsurkhi/...