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

如果有错误，验证器函数将返回错误的对象字面量，否则返回 null。结果的虚假性是角度知道如何确定控件是否有效。因此，如果您使用.error 或!...valid，您可以假设结果在功能上是等效的。

使用!...valid（或更恰当的.invalid）的说法是更明确的方法，如果您查看Angular's examples，他们就是这样做的。

我是这样看的：谁知道将来你所依赖的行为是否总是一样？将来可能会出现错误为空但控件仍然无效的合法案例。最好在没有额外成本的情况下采用最明确的方法。

编辑

其实看看源代码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。