title: Check box validation only works once
body: <p>It works on <code>last_name</code> when the user submits and is invalid. If touched and is invalid, then it adds a red border around the checkbox and shakes it.It works every time. </p>
  
  <p>For example if the user enter some value in the <code>last_name</code> and then the red border disappears and If he delete everything then the red border appears again.</p>
  
  <p>But in case of checkbox the red outline around the checkbox is only added when the form is submitted, the red outline disappears when the box is checked but after that it doesn't work if the box is checked or unchecked again.</p>
  
  <pre><code> &lt;input [ngClass]="{'animated shake red-border-err': registerForm.get('last_name').invalid &amp;&amp; registerForm.get('last_name').touched || registerForm.get('last_name').invalid &amp;&amp; registerForm.get('last_name').invalid &amp;&amp; submitted }" type="text" formControlName="last_name" name="last_name" placeholder="Last Name *"/&gt;
   &lt;div [ngClass]="{'animated shake check-box-border-err': registerForm.get('terms').invalid &amp;&amp; registerForm.get('terms').touched || registerForm.get('terms').invalid &amp;&amp; registerForm.get('terms').invalid &amp;&amp; submitted }"&gt;
      &lt;input formControlName="terms" name="terms" type="checkbox" value=""&gt;I agree &lt;a href=""&gt;Terms and conditions&lt;/a&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>ts file</strong></p>
  
  <pre><code>this.registerForm = this.formBuilder.group({
     last_name:['', Validators.required],
     terms: ['', Validators.required],
  })
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.check-box-border-err input[type=checkbox] {
      outline: 1px solid red;
  }
  </code></pre>