title: How to enable / disable a button based on a checkbox being checked in Angular
body: <p>I am trying to add validation to my Angular app's form.</p>
  
  <p>The first section of my form contains:</p>
  
  <ul>
  <li>1 checkbox</li>
  <li>2 radio button group's</li>
  <li>1 button (which navigates to the next section of the form)</li>
  </ul>
  
  <p>The button is to be disabled until the user checks the checkbox &amp; chooses an option from both radio button group's.</p>
  
  <p>Here is the code for my button:</p>
  
  <pre><code>&lt;button
      [disabled]="
          theChkAcceptTerms.invalid || 
          theInsuredType.invalid || 
          theReportInjury.invalid
          "&gt;
  </code></pre>
  
  <p>And here is the code for my checkbox:</p>
  
  <pre><code>&lt;checkbox
      id="accept"
      heading="I accept"
      name="accept"
      value="accept"
      [(ngModel)]="chkAcceptTerms"
      required
      #theChkAcceptTerms="ngModel"&gt;
  &lt;/checkbox&gt;
  </code></pre>
  
  <p>Currently, when the page loads the button is disabled. It is only enabled once I check the checkbox, &amp; choose an option in both radio groups.</p>
  
  <p>However, if I un-check the checkbox, the button is not disabled.</p>
  
  <p>Can someone please tell me how I can disable the above button if the checkbox is not checked. Thanks a lot!</p>