我可以使用 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 会自动供子组件使用。

Answer 2

查看此库 https://www.npmjs.com/package/ng-error-messages 以根据验证规则显示错误消息：

<input placeholder="Texto:"  formControlName="text">
<div errorMessage="text" alias="Super Texto" ></div>

Can i use ngxErrors or something like it to display a form error?