Angular 角度：使用'显示反应式表单验证消息；格式错误'；或者'；！表格.有效'；

在我的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.valid

，我们就这个小问题进行了长时间的讨论。我仍然没有说服我的队友。对于我来说，如果

表单

有一个

错误

，那么它的状态将是

无效

，或者

表单

无效，因为它有一个

错误

谁能告诉我我们应该遵循哪一种选择，并且从根本上说是正确的

---

非常感谢。

如果有错误，验证器函数将返回错误的对象文本，否则将返回null。结果的错误在于angular know如何确定控件是否有效。因此，如果使用

.error

或

！，可以假定结果在功能上是等效的！。。。有效

正在使用

！。。。有效的

（或者更恰当地说是。无效的）是更明确的方法，如果你看一下，他们就是这样做的

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

编辑

实际查看

AbstractControl

的源代码。根据

\u 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;
}

---

假设

错误

可能为空，但控制状态仍然为

无效

，那么您肯定应该检查

无效

，而不是

错误

，谢谢您的回复。我相信你回答的最后一部分：“在没有额外成本的情况下，最好采取最明确的方法。”因为我们的项目很大，所以我有点困惑。你可能想看看我的最新答案。你绝对应该用无效的。哇，太好了。真让人大开眼界。我没有给予太多的深入关注。感谢你的努力。谢谢

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;
}