forms - 我可以使用 ngxErrors 或类似的东西来显示表单错误吗？

Question

我使用 ngxErrors 来显示表单控件的错误并且效果很好。有没有办法为表单或表单组获得类似的功能？目前，我显示这样的表单错误:

<div *ngIf="form.hasError('loginFailed')">
  Login Failed
</div>

糟糕的是，当我检测到存在表单错误(例如，在提交登录表单后)而不是控制错误时，我将其设置为:

this.form.setErrors({ loginFailed: true });
this.cdr.detectChanges();

其中 this.cdr 是 ChangeDetectorRef 的实例。这是必要的，因为我正在使用 OnPush 更改检测策略。所以基本上这就像从 AngularJS 中重新调用 $scope.$apply() 一样。

我真正想做的是更像 ngxErrors 的做法:

<div ngxErrors="myForm">
  <div ngxError="loginFailed" [when]="['dirty', 'touched']">
  The login has failed
 </div>

但是 ngxErrors 期望 myForm 是一个控件。

Answer 1

此功能目前未纳入 ngxErrors，但我提交了 PR。 https://github.com/UltimateAngular/ngxerrors/pull/18

工作语法是对上面的稍作修改:

<div ngxErrors>
  <div ngxError="loginFailed" [when]="['dirty', 'touched']">
    The login has failed
  </div>
</div>

我了解到您不必告诉子组件表单，FormGroupDirective 自动可供子组件使用。