title: Angular 7 form and Bootstrap checkbox validates form when checked but doesn't invalidate when unchecked
body: <p>I have a register form with a checkbox for the T of S. The 'Register' button (the form) gets enabled when the form is valid, and disabled when invalid. I can fill out the form and select the checkbox and the register button becomes enabled/clickable. So the form is valid, but when I uncheck it, the register button remains enabled/clickable and the form remains valid. It doesn't become invalid!</p>
  
  <p>FYI - I added a couple of statements into the input 'name' and '[checked]' to see if that would get it to work but had no luck.</p>
  
  <p>Here is my form and some of the .ts code. Some code is left out to keep it short.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>@Component({
    selector: 'app-register',
    templateUrl: './register.component.html',
    styleUrls: ['./register.component.css']
  })
  export class RegisterComponent implements OnInit, AfterViewInit {
    // some variables here removed
    registerForm: FormGroup;
    bsConfig: Partial&lt;BsDatepickerConfig&gt;;
    terms = false;
    
    
  
    constructor(private authService: AuthService, private router: Router,
                private alertService: AlertService, private fb: FormBuilder, private zone: NgZone) {}
  
    ngOnInit() {
      this.bsConfig = {
        containerClass: 'theme-red'
      };
      this.createRegisterForm();
    }
    
    createRegisterForm() {
      this.registerForm = this.fb.group({
        terms: ['', Validators.required],
      });
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form [formGroup]="registerForm" (ngSubmit)="register()"&gt;
    &lt;div class="form-group"&gt;
      &lt;div class="form-check"&gt;
        &lt;input class="form-check-input" id="gridCheck" 
           [ngClass]="{'is-invalid': registerForm.get('terms').errors &amp;&amp; registerForm.get('terms').touched}" 
           name="terms" 
           type="checkbox"  
           formControlName="terms"&gt;
        &lt;label class="form-check-label" for="gridCheck"&gt;Agree to terms&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group text-center"&gt;
      &lt;button class="btn btn-yb w-100" [disabled]="!registerForm.valid" type="submit"&gt;
          &lt;span *ngIf="loadingRegister" class="spinner-border spinner-border-sm color-yb-white" role="status" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Loading...&lt;/span&gt;
          &lt;span *ngIf="!loadingRegister"&gt;Register&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>