title: Form Validation with valid and invalid class
body: <p>I have a large form with form validations and I want to do validation on user input like async. I have done with validation for one field what I want but if I have several fields I do not know how to validate individual fields.</p>
  
  <p>Here is sample code for what I have tried:</p>
  
  <pre><code>    &lt;form [formGroup]="form" (ngSubmit)="onSubmit()"&gt;
          &lt;p&gt;
              &lt;label&gt;First Name:&lt;/label&gt;
              &lt;input type="text" formControlName="firstname" (blur)="validcls()" (keyup)="validcls()" [class.valid]="validclass" [class.invalid]="invalidclass"&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;label&gt;Password:&lt;/label&gt;
              &lt;input type="password" formControlName="password"&gt;
          &lt;/p&gt;
          &lt;p&gt;
              &lt;button type="submit" [disabled]="!form.valid"&gt;Submit&lt;/button&gt;
          &lt;/p&gt;
      &lt;/form&gt;
  
  validcls(){
      if (this.form.controls.firstname.valid){
        this.validclass = true;
        this.invalidclass = false;
      }
      else if (this.form.controls.firstname.invalid || 
        this.form.controls.firstname.touched){
        this.validclass = false;
        this.invalidclass = true;
      }
    }
  </code></pre>
  
  <p>You can see full working example here:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-vfz58j?file=app%2Fapp.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-vfz58j?file=app%2Fapp.component.ts</a></p>