Angular 4 自定义验证错误消息答案

【问题标题】：Angular 4 custom validation error messageAngular 4 自定义验证错误消息
【发布时间】：2017-11-09 10:05:21
【问题描述】：

我正在使用 Angular 4（反应式表单）处理表单，我的问题是我无法单独显示 电子邮件地址 字段的错误消息。

我正在尝试这种格式，但没有成功。

<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 *ngIf="name.errors.forbiddenName">
    Name cannot be Bob.
  </div>

这是我的示例代码

register.component.ts

constructor(private fb: FormBuilder) { 

    this.rForm = fb.group({

    'account': [null, Validators.required],
    'company': [null, Validators.required],
    'website': '',
    'email': [null, Validators.compose([Validators.email, Validators.required])],
    'phone': [null, Validators.required],

    })

  }

register.component.html

<div class="col-md-6">
    <label>Email Address</label>
    <input type="email" name="email" class="form-control" formControlName = "email">
    <span class="text-danger" *ngIf="!rForm.controls['email'].valid && rForm.controls['email'].touched">This field is required. Please provide a valid email address.</span>

谢谢。

【问题讨论】：

标签： angular angular-reactive-forms angular-validation

【解决方案1】：

首先，您应该使用rForm.get('email').valid 而不是rForm.controls['email'].valid。

更简单的方法是将以下代码添加到您的类中：

get email() { return this.rForm.get('email'); }

这样，您可以使用email.valid，而不是在模板中使用rForm.get('email').valid。

我在这里整理了一个有效的 plnkr (http://plnkr.co/edit/bDANlDxej3hAKQFx9sra?p=preview)

【讨论】：