title: Angular 6 - Form Validation on blur
body: <p>I want to validate input filled in onBlur how can i do this. please help me.</p>
  
  <pre><code>&lt;form class="form-horizontal" role="form" name="form" id="form"
                  (ngSubmit)="f.form.valid &amp;&amp; onSubmit()"
                  #f="ngForm" novalidate&gt;
  
      &lt;input type="text" class="form-control" placeholder="Social Id"
          [ngModel]="generalUserData.socialId" [maxlength]=12 name="socialId" [minlength]=10
          (blur)="onBlurMethod($event.target.name, $event.target.value ,generalUserData)"
          #socialId="ngModel" [ngClass]="{ 'is-invalid': f.submitted &amp;&amp; socialId.invalid }"
          pattern="\d{9}(v|V)|\d{12}" required/&gt;
      &lt;div *ngIf="f.submitted &amp;&amp; socialId.invalid" class="invalid-feedback"&gt;
          &lt;div *ngIf="socialId?.errors.required"&gt;NIC is required&lt;/div&gt;
          &lt;div *ngIf="socialId?.errors.minlength"&gt;NIC must be at least 10 characters long.&lt;/div&gt;
          &lt;div *ngIf="socialId?.errors.pattern"&gt;Not valid NIC&lt;/div&gt;
          &lt;div *ngIf="socialId?.errors.maxlength"&gt;NIC must be less than 12 characters long.&lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I used below sample <a href="http://jasonwatmore.com/post/2018/05/11/angular-6-template-driven-forms-validation-example" rel="nofollow noreferrer">link</a> and then I want to validate as on blur how can I do this.</p>