Question

我正在学习Angular 2，并正在实施一个带有一些基本验证的简单注册表。我有一个输入字段有3个验证; required，minLength和maxLenth 现在对于每个验证，我想显示不同的验证消息，即，必填项：'名称字段为必填项' 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!')
  }
})

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

1 个答案:

Demo Plunker