Need to uncheck all checkboxes, when selecting bottom checkbox, no jquery using Angular 7

Using Angular 7 and no jquery, I need to have one check box, when clicked, will uncheck all preceding checkboxes in a form group.

in my TS file I have this:

 initForm() {
  this.financialSectionSix = this.formBuilder.group({
    medicaidOrSssi: [false],
    snap: [false],
    freeOrReducedPriceLunch: [false],
    tanf: [false],
    wic: [false],
    noneOfTheAbove: [false]
   });
 }

In my HTML file i have this:

<div [hidden]="selectedSectionGroup.sectionSix" class="tab-pane fade show 
active"
id="" role="tabpanel">
<form [formGroup]="financialSectionSix">

<label class="form-check-label" for="financial1">
  <input required formControlName="medicaidOrSssi" id="medicaidOrSssi" 
    class="form-check-input"
    data-hint="yes" type="checkbox" value="true">
  Medicaid or Supplemental Security Income (SSI)
</label>


<label class="form-check-label" for="cada-form-student-financial- 
  section-6-1-2">
  <input required formControlName="snap" id="snap" class="form-check- 
    input" data-hint="yes" type="checkbox"
     value='true'>
  Food Stamps or Supplemental Nutrition Assistance Program (SNAP)
  </label>

<label class="form-check-label" for="cada-form-student-financial- 
 section-6-1-6">
  <input required formControlName="noneOfTheAbove" id="noneOfTheAbove" 
    class="form-check-input" data-hint="yes" type="checkbox" value='true' 
    id="cada-form-student-financial-section-6-1-6"> None of the Above
  </label>
</form>
</div>

The None of the above check box should unselect everything