每个单独的验证检查都有不同的验证消息

Question

我正在学习 Angular 2，并且正在实现一个带有一些基本验证的简单注册表单。 我有一个包含 3 个验证的输入字段；必需，minLength 和 maxLenth 现在对于这些验证中的每一个，我想显示不同的验证消息， IE。， for required: '名称字段是必需的' minLength: '名称应至少为 5 个字符'等

目前，根据我在 Internet 上找到的示例，我可以看到每个人都只实现了一条通用消息，只需检查状态是否有效，然后针对所有验证错误显示一条通用消息。

如何区分不同类型的错误，以便针对不同的错误显示不同的消息？

下面是我的代码，

这适用于单个通用错误消息，

      <div class="divTableRow">
        <div class="divTableCell">First Name</div>
        <div class="divTableCell"><input type="text" id="txtFName" placeholder="First Name" [formControl]="registerUserForm.controls['txtFName']"></div>
        <div class="alert alert-danger" *ngIf="!registerUserForm.controls['txtFName'].valid">You must select a first name.</div>
      </div>

如果我尝试区分不同类型的消息，这不起作用，

      <div class="divTableRow" >
        <div class="divTableCell">First Name</div>
        <div class="divTableCell"><input type="text" id="txtFName" placeholder="First Name" [formControl]="registerUserForm.controls['txtFName']"></div>
        <div class="alert alert-danger" *ngIf="registerUserForm.controls['txtFName'].error.required && !registerUserForm.controls['txtFName'].valid">You must select a first name.</div>
        <div class="alert alert-danger" *ngIf="registerUserForm.controls['txtFName'].error.minLength && !registerUserForm.controls['txtFName'].valid">You must enter atleast 5 characters.</div>
      </div>

在 TS 文件中，我有

'txtFName': [null, Validators.compose([Validators.required, Validators.minLength(5), Validators.maxLength(50)])],

基本上，在 HTML 中，语句 !registerUserForm.controls['txtFName'].valid 只会提供控件是否有效，但不提供有关哪个规则失败的信息。我想以某种方式确定错误的类型。

Answer 1

这应该可行：

<small *ngIf="registerUserForm.controls['txtFName'].hasError('required')">Name is required!</small>
<small *ngIf="registerUserForm.controls['txtFName'].hasError('minlength')">Name has to be at least 5 chars</small>
<small *ngIf="registerUserForm.controls['txtFName'].hasError('maxlength')">Name can be max 50 chars</small>

Demo Plunker

你也可以使用valueChanges:

this.registerUserForm.get('txtFName').valueChanges
.subscribe(data => {
  console.log('changes happened. Do something!')
  }
})