title: how to get required error and email pattern separately angular 4?
body: <p>I am implementing angular 4 reactive form validations. I have this layout of form</p>
  
  <p><a href="https://i.stack.imgur.com/k0i3v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k0i3v.png" alt="enter image description here"></a></p>
  
  <p>Here is my app.component.ts code </p>
  
  <pre><code>import { Component } from '@angular/core';
  import { FormBuilder, FormGroup, Validators} from '@angular/forms';
  
  @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
   rForm     : FormGroup;
   post      : any;
   name      : string ='';
   userEmail : string = '';
   desc      : string ='';
   titleAlert: string ='This is required';
   emailError: string ="Enter valid email";
  
  constructor(private fb : FormBuilder){
    this.rForm = fb.group({
      'name' : [null, Validators.required],
      'userEmail' : [null, Validators.email],
      'desc' : [null, Validators.compose([Validators.required, 
  Validators.minLength(30), Validators.maxLength(500)])],
      'validate' :'' 
    });
   }
  
  addPost(post){
      this.desc = post.desc;
      this.name = post.name;
   }
  
  }
  </code></pre>
  
  <p>Here is my app.component.hmtl code </p>
  
  <pre><code>&lt;div *ngIf="!name;else formInfo"&gt;
  &lt;form [formGroup]="rForm" (ngSubmit)="addPost(rForm.value)"&gt;
  &lt;div class="form-container"&gt;
    &lt;div class="row columns"&gt;
  
      &lt;h1&gt;My Reactive Form&lt;/h1&gt;
  
      &lt;label&gt;Name
        &lt;input type="text" formControlName="name"&gt;
      &lt;/label&gt;
      &lt;div class="alert" *ngIf="!rForm.controls['name'].valid &amp;&amp; 
      rForm.controls['name'].touched"&gt;{{titleAlert}}&lt;/div&gt;
  
      &lt;label&gt;Email
          &lt;input type="text" formControlName="userEmail"&gt;
        &lt;/label&gt;
        &lt;div class="alert" *ngIf="!rForm.controls['userEmail'].valid &amp;&amp; 
        rForm.controls['userEmail'].touched"&gt;{{emailError}}&lt;/div&gt;
  
        &lt;label&gt;Description
          &lt;input type="text" formControlName="desc"&gt;
      &lt;/label&gt;
      &lt;div class="alert" *ngIf="!rForm.controls['desc'].valid &amp;&amp; 
      rForm.controls['desc'].touched"&gt;Description should be between 30 to 50 
      characters.&lt;/div&gt;
  
        &lt;label for="validate"&gt;Minimum of 3 characters&lt;/label&gt;
        &lt;input type="checkbox" name="validate" formControlName="name" 
      value="1"&gt;On
        &lt;input type="submit" class="button expanded" value="Submit Form" 
          [disabled]="!rForm.valid"&gt;
      &lt;/div&gt;      
    &lt;/div&gt;
    &lt;/form&gt;
   &lt;/div&gt;
  
   &lt;ng-template #formInfo&gt;
    &lt;div class="form-container"&gt;
      &lt;div class="row columns"&gt;
        &lt;h1&gt;{{name}}&lt;/h1&gt;
  
        &lt;p&gt;{{desc}}&lt;/p&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>I want that when user is typing an email in email input, so if it write wrong email so i should get separate error like  "Enter valid email" and if user left Email input empty and jumps to another field then i should get an error like "This field is required" How can i achieve this?</p>