Mat-form-field не удаляет неверный класс mat-form-field-invalid после устранения ошибки

Я пытаюсь создать собственный валидатор для mat-input. Все работает правильно, ошибка отображается при возникновении ошибки, но после устранения ошибки mat-form-field не удаляет класс mat-form-field-invalidhttps://imgur.com/a/MSsaVop

class CrossFieldErrorMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | 
    NgForm | null): boolean {
        return control.dirty && form.invalid;
   }
}

errorMatcher = new CrossFieldErrorMatcher();
register = this.fb.group({
userName: ['', [Validators.required]],
userEmail: ['', [Validators.required, Validators.email]],
phone: ['', [Validators.required, this.phoneNumberValidator]],
userPassword: ['', [Validators.required]],
passwordconfirm: ['', ],
adminName: ['', [Validators.required]],
adminPassword: ['', [Validators.required]],

}, {
  validator: this.passwordValidator
})

passwordValidator(form: FormGroup) {
    const condition = form.get('passwordconfirm').value !== 
        form.get('userPassword').value;

    return condition ? { passwordsDoNotMatch: true } : null;
}


<mat-form-field class = " my-4 ">
    <input matInput type = "password" required 
           formControlName = "userPassword" placeholder = "Password" 
           [type] = "hide ?'password' : 'text'" class = "col-4" name = "password">    
</mat-form-field>
<mat-form-field class = " my-4 ">
    <input matInput type = "password" required 
           formControlName = "passwordconfirm" placeholder = "Confirm 
Password"
           [type] = "hide2 ? 'password' : 'text'" class = "col-4"
           [errorStateMatcher] = "errorMatcher" name = "conpassword">

    <mat-error *ngIf = "register.hasError('passwordsDoNotMatch')">
        Passwords do not match!
    </mat-error>
</mat-form-field>

javascript angular angular-material

08.04.2019 14:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

5 428

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема в том, что ваш CrossFieldErrorMatcher использует всю форму для проверки паролей, когда все, что вам действительно нужно, — это просмотреть подмножество этой формы.

Чтобы исправить это, просто добавьте отдельный FormGroup для элементов паролей, чтобы ваша форма выглядела так:

register = this.fb.group({
userName: ['', [Validators.required]],
userEmail: ['', [Validators.required, Validators.email]],
phone: ['', [Validators.required, this.phoneNumberValidator]],
// Create a separate FormGroup here to isolate the scope
passwords: this.fb.group({
    userPassword: ['', [Validators.required]],
    passwordconfirm: [''],
}, { validator: this.passwordValidator }),
adminName: ['', [Validators.required]],
adminPassword: ['', [Validators.required]]
})

А затем в своем шаблоне просто «оберните» элементы пароля в div, указав этот новый FormGroup как его FormGroup вот так:

<div [formGroup] = "register.get('passwords')"> // Assign the new FormGroup
    <mat-form-field class = " my-4 ">
        <input matInput type = "password" required 
               formControlName = "userPassword" placeholder = "Password" 
               [type] = "hide ?'password' : 'text'" class = "col-4" name = "password">    
    </mat-form-field>
    <mat-form-field class = " my-4 ">
        <input matInput type = "password" required 
               formControlName = "passwordconfirm" placeholder = "Confirm Password"
               [type] = "hide2 ? 'password' : 'text'" class = "col-4"
               [errorStateMatcher] = "errorMatcher" name = "conpassword">

        <mat-error *ngIf = "register.get('passwords').hasError('passwordsDoNotMatch')">
            Passwords do not match!
        </mat-error>
    </mat-form-field>
</div>

извините, но это не сработало stackblitz.com/edit/mat-error-parent-validation-yyt6f5

— 08.04.2019 18:10

Я отредактировал свой пост, это должно решить вашу проблему! Также ваш Stackblitz не работает. Похоже, вам не хватает нескольких запятых (,).

— 08.04.2019 18:54

stackblitz.com/edit/mat-error-parent-validation-yyt6f5 вот еще раз попробую ваш метод но на этот раз ничего не показывает

— 09.04.2019 23:58

Вам нужно вернуть CrossFieldErrorMatcher обратно в return control.dirty && form.invalid;, потому что теперь, когда у паролей есть собственная форма, errorStateMatcher может использовать эту форму с ограниченной областью для изолированной проверки.

— 10.04.2019 00:09

Приятно это слышать и рад, что помог!

— 11.04.2019 12:02

08.04.2019 15:03