Угловой материал: матовая ошибка не отображается несмотря на истинные методы

Question

У меня есть подтверждение формы пароля, которое я хочу проверить.

Я хочу отобразить элемент mat-error, когда пароль не совпадает со значением в поле ввода пароля для подтверждения.Для этого у меня есть функция с именем equalPasswords().Если функции одинаковы, то мы получаем true, если нет, мы получаем false.

<mat-form-field>
              <input matInput placeholder="Repeat password" [formControl]="password2" type="password">
              <mat-error *ngIf="password2.invalid && password2.hasError('required')">Password is required</mat-error>
              <mat-error *ngIf="!equalPasswords() && !password2.hasError('required')">Passwords need to match</mat-error>
</mat-form-field>

Я проверил консоль, и когда я ввожу два разных ввода в поля пароля, функция equalPasswords () возвращает false.Однако это все еще не показывает ошибку в DOM.

Кто-нибудь знает, как это исправить?

Registration.component.ts

@Component({
    selector: 'app-sign-up',
    templateUrl: 'sign-up.component.html',
    styleUrls: ['sign-up.component.css']
})

export class SignUpComponent implements OnInit {

    mySignupForm: FormGroup;
    countries = countries;
    uniqueUsernameMessage;
    uniqueEmailMessage;
    formSubmitted = false;
    @Output() closeSubmenu = new EventEmitter();
    @ViewChild('select') select;

    constructor(
        private authService: AuthenticationService,
        private route: Router,
        private navigationService: NavigationService){}

    get firstName() { return this.mySignupForm.get('firstName'); }
    get lastName() { return this.mySignupForm.get('lastName'); }
    get username() { return this.mySignupForm.get('username'); }
    get email() { return this.mySignupForm.get('email'); }
    get password1() { return this.mySignupForm.get('password1'); }
    get password2() { return this.mySignupForm.get('password2'); }
    get birthDate() { return this.mySignupForm.get('birthDate'); }
    get country() { return this.mySignupForm.get('country'); }
    get house() { return this.mySignupForm.get('house'); }

    ngOnInit() {
        this.mySignupForm = new FormGroup({
            firstName: new FormControl(null, Validators.required),
            lastName: new FormControl(null, Validators.required),
            username: new FormControl(null, [Validators.required, Validators.minLength(5), Validators.maxLength(15)]),
            birthDate: new FormControl(null, Validators.required),
            password1: new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(15), Validators.pattern('^.*(?=.{4,10})(?=.*\\d)(?=.*[a-zA-Z]).*$')]),
            password2: new FormControl(null, Validators.required),
            email: new FormControl(null, [Validators.required, Validators.email]),
            country: new FormControl(null, Validators.required),
            house: new FormControl(null, Validators.required)
        })
    }

    equalPasswords() {

        console.log('equaltest', this.password1.value === this.password2.value);
        return this.password1.value === this.password2.value;
    }

}

Answer 1

Я обнаружил очень тонкую ситуацию, в которой это может произойти.

Если вы поместите директиву [formGroup] на что-то вроде <div>, тогда она не получит submitted == true, когдаформа отправлена ​​(она должна быть на <form>, чтобы это произошло).

Отправляемая форма является одним из двух триггеров для отображения ошибки - другой - для поля, к которому было прикосновено.А прикосновение означает onBlur, что означает, что фокус должен быть потерян .

Таким образом, вы можете получить эту ситуацию:

• У вас есть [formGroup] наdiv
• У вас есть что-то вроде формы имени пользователя / пароля.
• У вас также есть кнопка отправки.
• Вы вводите оба поля и нажимаете ввод.
• Ваша проверка выдает ошибку, но она не отображается!ПОЧЕМУ!
• Потому что вы никогда не вводили blur поле пароля (например, ваш курсор все еще находится в этом поле)
• Самое простое решение - ввести только [formGroup]для тега <form>
• Другой способ заключается в создании пользовательского ErrorStateMatcher

Если вы передаете formGroup «тупому»дочерний компонент (который не имеет своей собственной формы), вы должны использовать внедрение зависимостей и передать вместо него FormGroupDirective в конструкторе.

Answer 2

MatFormField отображает mat-error элементы только тогда, когда FormControl имеет ошибку.Он не отображается только потому, что вы указываете это через ngIfElse - это будет работать только в зависимости от состояния элемента управления формы.Один из способов решения этой проблемы - создать собственный валидатор и использовать его для проверки соответствия паролей.Вы также можете установить ошибку в поле из вашей функции equalPasswords().Это должно быть что-то вроде:

equalPasswords(): boolean {

    const matched: boolean = this.password1.value === this.password2.value;

    console.log('equaltest', matched);

    if (matched) {
        this.signupForm.controls.password2.setErrors(null);
    } else {
        this.signupForm.controls.password2.setErrors({
           notMatched: true
        });
    }

    return matched;
}