title: How to show error message in form validation after completing the user entering
body: <p>I am working on form input field i am able to display errors if the user enters wrong. </p>
  
  <p>What i am expecting is when after the user complete is text in the input field and after that i should get the error message.</p>
  
  <p>but i am getting the error message shown when user started is typing</p>
  
  <p>here is my html code</p>
  
  <pre><code>  &lt;form [formGroup]="myForm" (ngSubmit)="submit()" &gt;
  
      &lt;ion-row&gt;
        &lt;ion-col&gt;
            &lt;ion-item&gt;
              &lt;ion-label primary floating&gt;
                FIRST NAME
              &lt;/ion-label&gt;
              &lt;ion-input type="text" id="firstname" class="form-control" formControlName="firstname"&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
  
        &lt;/ion-col&gt;
        &lt;ion-col&gt;
            &lt;ion-item&gt;
              &lt;ion-label primary floating&gt;
                LAST NAME
              &lt;/ion-label&gt;
              &lt;ion-input type="text" id="lastname" class="form-control" formControlName="lastname"&gt;&lt;/ion-input&gt;
            &lt;/ion-item&gt;
        &lt;/ion-col&gt;
      &lt;/ion-row&gt;
  
      &lt;ion-item&gt;
        &lt;ion-label primary floating&gt;
          USER ID (PHONE NO)
        &lt;/ion-label&gt;
              &lt;ion-input type="number" id="useridphone" class="form-control" formControlName="useridphone"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
      &lt;div *ngIf="submitAttempt"&gt;
      &lt;p *ngIf="myForm.controls.useridphone.errors &amp;&amp; myForm.controls.useridphone.dirty  " &gt;
        &lt;small class="up" &gt; 
          &lt;strong&gt;&lt;i&gt;
            Phone Number Must be 10 digits!
          &lt;/i&gt;&lt;/strong&gt;
        &lt;/small&gt;
      &lt;/p&gt;
      &lt;/div&gt;
      &lt;ion-item&gt;
        &lt;ion-label primary floating&gt;
          PASSWORD
        &lt;/ion-label&gt;
              &lt;ion-input type="password" id="password"  class="form-control" formControlName="password"&gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
  
      &lt;p *ngIf="myForm.controls.password.errors &amp;&amp; myForm.controls.password.dirty"&gt;
        &lt;small class="up"&gt;
          &lt;strong&gt;&lt;i&gt;
            Password must contain atleast (4),1-Char 1-Number
          &lt;/i&gt;&lt;/strong&gt;
        &lt;/small&gt;
      &lt;/p&gt;
  
      &lt;ion-item&gt;
        &lt;ion-label primary floating&gt;
          CONFIRM  PASSWORD
        &lt;/ion-label&gt;
              &lt;ion-input type="password" id="confirmpassword"  class="form-control" formControlName="confirmpassword" &gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
  
      &lt;ion-item&gt;
        &lt;ion-label primary floating&gt;
          EMAIL
        &lt;/ion-label&gt;
              &lt;ion-input type="email" id="email"  class="form-control" formControlName="email" &gt;&lt;/ion-input&gt;
      &lt;/ion-item&gt;
  
      &lt;p *ngIf="myForm.controls.email.errors &amp;&amp; myForm.controls.email.dirty "  class="alert alert-danger"&gt;
        &lt;small class="up"&gt;
          &lt;strong&gt; &lt;i&gt;
            Please Enter Valid Email Address!
          &lt;/i&gt;&lt;/strong&gt;
        &lt;/small&gt;
      &lt;/p&gt;
  
      &lt;div padding&gt; &lt;/div&gt;
      &lt;div padding&gt; &lt;/div&gt;
  
      &lt;button ion-button full round  type="submit" [disabled]="!myForm.valid" color="secondary"&gt;SIGN UP&lt;/button&gt; &lt;br&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>here is my ts file</p>
  
  <pre><code>passwordRegex: any = '(^(?=.*[a-z])(?=.*[0-9])[a-zA-Z0-9]+$)' ;
    emailRegex: any = '^[a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,15})$';
  
  this.myForm =  new FormGroup({
        'firstname'      : new FormControl('',[Validators.required,Validators.minLength(3),Validators.maxLength(10)]),
        'lastname'       : new FormControl('', [Validators.required,Validators.minLength(1),Validators.maxLength(10)]),
        'useridphone'    : new FormControl('', [Validators.required,Validators.minLength(10),Validators.maxLength(10)]),
        'password'       : new FormControl('',Validators.compose([Validators.required,Validators.minLength(4),Validators.maxLength(25),
                            Validators.pattern(this.passwordRegex)])),
        'confirmpassword': new FormControl('',Validators.required),
        'email'          : new FormControl( '', Validators.compose([ Validators.required, Validators.pattern(this.emailRegex) ]) )
      })
  </code></pre>