Question

我正在尝试为我的应用程序制作一些错误消息，我已经这样做了

<span *ngIf="email.hasError('required')">Please enter your e-mail address</span>
<span *ngIf="email.hasError('email') && !email.hasError('required')">Please enter a valid e-mail address</span>

但是我不喜欢它看起来如何，也许有人可以帮助我简化它？

Answer 1

您可以在代码中执行验证，然后绑定到结果。

以下是我的一个看法：

<span class="help-block" *ngIf="displayMessage.productName">
  {{displayMessage.productName}}
</span>

然后我在我的组件中有一个跟踪验证状态的属性：

displayMessage: { [key: string]: string } = {};

希望能引导你走上正确的道路。

如果您想更详细地查看我的解决方案，可以在此处找到它：https://github.com/DeborahK/Angular2-ReactiveForms在APM-Updated文件夹中。

（此代码来自我在Pluralsight上的“Angular Reactive Forms”课程。）

Angular 2错误消息

1 个答案: