Angular: Показать сообщение проверки формы с помощью «form.errors» или «! Form.valid»

Question

Во многих местах я использовал реактивную форму в своем проекте 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.

Может кто-нибудь предложить мне, какой вариант мы должны следоватьи правильно в принципе.

Большое спасибо заранее.

Answer 1

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