title: Angular 4 custom validation error message
body: <p>I'm working on a form using Angular 4 (reactive forms), my problem is I cant show individually the error messages for the <strong>email address</strong> field.</p>
  
  <p>I'm trying this format but no luck.</p>
  
  <pre><code>&lt;div *ngIf="name.invalid &amp;&amp; (name.dirty || name.touched)"
       class="alert alert-danger"&gt;
  
    &lt;div *ngIf="name.errors.required"&gt;
      Name is required.
    &lt;/div&gt;
    &lt;div *ngIf="name.errors.minlength"&gt;
      Name must be at least 4 characters long.
    &lt;/div&gt;
    &lt;div *ngIf="name.errors.forbiddenName"&gt;
      Name cannot be Bob.
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>This is my sample code</strong></p>
  
  <p><em>register.component.ts</em></p>
  
  <pre><code>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],
  
      })
  
    }
  </code></pre>
  
  <p><em>register.component.html</em></p>
  
  <pre><code>&lt;div class="col-md-6"&gt;
      &lt;label&gt;Email Address&lt;/label&gt;
      &lt;input type="email" name="email" class="form-control" formControlName = "email"&gt;
      &lt;span class="text-danger" *ngIf="!rForm.controls['email'].valid &amp;&amp; rForm.controls['email'].touched"&gt;This field is required. Please provide a valid email address.&lt;/span&gt;
  </code></pre>
  
  <p></p>
  
  <p>Thanks.</p>