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

Я использую 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>

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

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


typescript javascript angular angular7 angular-reactive-forms
person Skywalker    schedule 07.11.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

person Barzev    schedule 07.11.2018

arrow_upward
0
arrow_downward

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

<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. Простая логика, лежащая в основе этого, состоит в том, чтобы проверить, является ли одна ошибка недопустимой, а другая допустима, что будет показывать по одной ошибке за раз.

Мы будем очень признательны за правку с правильным синтаксисом.

person Ashish Yadav    schedule 07.11.2018