Реактивные формы Как показывать одно сообщение об ошибке за раз?

Question

Я использую Angular 7 и создал реактивную форму. В поле ввода email установлены два валидатора, см. Ниже:

email: ['', [Validators.email, Validators.pattern('^[\\w._]+@company(.com|.go|.jet)')]],

Оба валидатора имеют 2 сообщения об ошибках в шаблоне:

<label for="email" class="error-msg" *ngIf="authForm.get('email').hasError('email')  && hideFocus">Your email is invalid</label>
<label for="email" class="error-msg" *ngIf="authForm.get('email').hasError('pattern')  && hideFocus">Only emails ending with .com .go and .jet are allowed</label>

Когда пользователь вводит данные в поле ввода, обе ошибки отображаются одновременно.

Как отобразить одно сообщение об ошибке за раз? Возможно ли это?

Answer 1

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

<label for="email" class="error-msg" *ngIf="authForm.get('email').hasError('email')  && hideFocus">Your email is invalid</label>
<label for="email" class="error-msg" *ngIf="!authForm.get('email').hasError('email') && authForm.get('email').hasError('pattern')  && hideFocus">Only emails ending with .com .go and .jet are allowed</label>

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

Редактирование с правильным синтаксисом будет высоко оценено.

Answer 2

Если сгенерированы обе ошибки (поскольку входные данные не удовлетворяют ни одному из правил валидации), вы можете реализовать переключатель ngIf-else для отображения любой ошибки, которую вы хотите первой. Пример этого можно найти здесь.