Angular: показывать сообщение проверки реактивной формы с помощью 'form.errors' или '! Form.valid'
Я использовал реактивную форму в своем проекте Angular во многих местах, и на прошлой неделе мы решили немного оптимизировать наш код. Во время проверки кода я обнаружил проблему с отображением сообщений проверки формы в HTML.
Поэтому я использовал приведенный ниже код, чтобы показать сообщения об ошибках проверки:
<form [formGroup] = "form">
<div>
<input formControlName = "firstName">
<div *ngIf = "form.controls.firstName.errors && (form.controls.firstName.touched || form.controls.firstName.dirty)">
This field is required
</div>
</div>
</form>
Вроде нормально, но что, если я заменю form.controls.firstName.errors на !form.controls.firstName.valid См. Ниже:
<form [formGroup] = "form">
<div>
<input formControlName = "firstName">
<div *ngIf = "!form.controls.firstName.valid && (form.controls.firstName.touched || form.controls.firstName.dirty)">
This field is required
</div>
</div>
</form>
Я не заметил никакой разницы, но в моей команде некоторые товарищи по команде придерживаются мнения, что мы должны использовать !form.controls.firstName.valid, и мы долго обсуждали этот небольшой вопрос. Я все еще не убедил своих товарищей по команде. Для меня, если у form есть error, тогда его статус будет invalid или form будет invalid, потому что у него есть error.
Может ли кто-нибудь подсказать мне, какой вариант нам следует придерживаться, и он в принципе правильный.
Спасибо заранее.
Ответы 1
Функция валидатора будет возвращать объектный литерал ошибок, если есть ошибка, или null в противном случае. Ложность результата заключается в том, как angular know определяет, действителен ли элемент управления. Таким образом, вы можете предположить, что результат будет функционально эквивалентным, если вы используете .error или !...valid.
Сказанное использование !...valid (или, точнее, .invalid) является более определенным подходом, и если вы посмотрите на Примеры Angular, вот как они это делают.
Я смотрю на это так: кто знает, будет ли поведение, от которого вы зависите, всегда одинаковым? В будущем может быть законный случай, когда ошибка равна нулю, но элемент управления по-прежнему недействителен. Лучше всего использовать наиболее явный подход, когда это не требует дополнительных затрат.
РЕДАКТИРОВАТЬ
На самом деле посмотрите на источник AbstractControl, потенциально ошибки могут быть пустыми, но элемент управления все еще может быть недействительным в зависимости от реализации функции _anyControls():
get invalid(): boolean { return this.status === INVALID; }
/*...*/
private _calculateStatus(): string {
if (this._allControlsDisabled()) return DISABLED;
if (this.errors) return INVALID;
if (this._anyControlsHaveStatus(PENDING)) return PENDING;
/* if the condition below is true that means the control will be invalid
* but errors will be null. */
if (this._anyControlsHaveStatus(INVALID)) return INVALID;
return VALID;
}
Учитывая, что возможны условия, при которых errors может быть нулевым, но статус управления по-прежнему будет invalid, тогда вам определенно следует проверять invalid, а не errors.
Возможно, вы захотите увидеть мой обновленный ответ. Вы обязательно должны использовать invalid.
Ух ты, здорово. Действительно сенсационное сообщение. Я не уделял особого внимания. Цените ваши усилия. Спасибо!
Спасибо за ответ, Даниэль. Я убежден в последней части вашего ответа: «Лучше всего использовать наиболее явный подход, когда это не требует дополнительных затрат». Поскольку наш проект большой, я был немного сбит с толку.