Question

我开始创建我的第一个Angular 4应用。我正在测试表单验证。我创建了一个模板驱动程序表单，并添加了一些验证器。

现在，我想显示字段的验证错误。这是我的实际代码：

<input 
  id="name" 
  name="name" 
  class="form-control"
  required 
  minlength="4"
  [(ngModel)]="name" #name="ngModel" >

<div 
  *ngIf="name.invalid && (name.dirty || name.touched)"
  class="alert alert-danger">

  <div *ngIf="name.errors.required">
    Name is required.
  </div>
  <div *ngIf="name.errors.minlength">
    Name must be at least 4 characters long.
  </div>

</div>

我很害怕为我表格中的每一个输入写这个！是否有可能写出类似的东西（当然，我尝试过这段代码，但它没有用）：

<div 
  *ngIf="name.invalid && (name.dirty || name.touched)"
  class="alert alert-danger">

  <p *ngFor="let error on name.errors">{{error}}</p>

</div>

Thanx为你提供帮助:)

Answer 1

希望这会对你有所帮助。

Simple Solution but not a generic one.

需要更改它才能显示验证错误。

Answer 2

尝试ngx-input-errors角度库

您可以设置错误消息，然后使用库为您提供的 ngxInputErrors 指令自动提取并显示输入错误消息

Angular 4显示所有输入验证错误

2 个答案: