title: Check Error Count Angular Reactive Forms
body: <p>I want to conditionally apply a css class if the error count in a form is greater than 1. How do I do this in angular4? </p>
  
  <p>Component:</p>
  
  <pre><code>import { Component } from "@angular/core";
  import { FormGroup, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
  
  @Component({
      ...
  })
  
  export class RegisterComponent {
    complexForm : FormGroup;
  
    constructor(fb: FormBuilder){
      this.complexForm = fb.group({
        'emailAddress' : [null, Validators.email],
        'firstName': [null, Validators.compose([Validators.required, Validators.minLength(2)])],
        ...
      })
    }
  
    submitForm(value: any){
      console.log(value);
    }
  }
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;form [formGroup]="complexForm" (ngSubmit)="submitForm(complexForm.value)"&gt;
        &lt;section class="form-block"&gt;
            &lt;div class="form-group" [ngClass]="{'has-error':!complexForm.controls['emailAddress'].valid &amp;&amp; complexForm.controls['emailAddress'].touched}"&gt;
                  &lt;label for="formFields_1"&gt;Email Address&lt;/label&gt;
                  &lt;input [formControl]="complexForm.controls['emailAddress']" type="text" spellcheck="false" id="formFields_1" placeholder="" size="35"&gt;
                  &lt;span *ngIf="complexForm.controls['emailAddress'].hasError('email') &amp;&amp; complexForm.controls['emailAddress'].touched" class="tooltip-content"&gt;
                      Please enter a valid email address (ex. joan@vmware.com)
                  &lt;/span&gt;
            &lt;/div&gt;   
            &lt;div class="form-group" [ngClass]="{'has-error':!complexForm.controls['firstName'].valid &amp;&amp; complexForm.controls['firstName'].touched}"&gt;
                &lt;label for="formFields_2"&gt;First Name&lt;/label&gt;
                  &lt;input [formControl]="complexForm.controls['firstName']" type="text" spellcheck="false" id="formFields_2" placeholder="" size="35"&gt;
                  &lt;span *ngIf="complexForm.controls['firstName'].hasError('required') &amp;&amp; complexForm.controls['firstName'].touched" class="tooltip-content"&gt;
                      Your first name must contain at least one letter
                  &lt;/span&gt;
            &lt;/div&gt;
       &lt;/section&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>If I want to apply the class <code>form-error</code> to <code>&lt;form&gt;</code> if the forms error count is greater than 1, how do I do this? Thanks for your ideas.</p>