0

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="{{financialSectionEnum.SECTION_SIX}}" 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

ghostagent151
  • 1,218
  • 2
  • 16
  • 33
  • you're looking for this: https://stackoverflow.com/questions/35039610/manually-set-value-for-formbuilder-control – Akber Iqbal Jul 13 '19 at 02:26
  • Unfortunately this does not work for my case. I need to keep validation for each field in this form group as well as include functionality to uncheck all boxes when selecting the bottom one. When using ngModel, it does not work without setting [ngModelOptions]="{standalone: true}". The form group is not registered and validation does not occur. – ghostagent151 Jul 15 '19 at 17:21
  • 1
    The solution can be found here: https://stackoverflow.com/questions/57044661/uncheck-all-boxes-in-form-group-in-angular-7 – ghostagent151 Jul 16 '19 at 00:55

0 Answers0