I need to have one check box in a form group that unchecks all checkboxes in the same form group as well as keep my validation.
In my TS file i have:
initForm() {
this.financialSectionSix = this.formBuilder.group({
medicaidOrSssi: [false],
snap: [false],
freeOrReducedPriceLunch: [false],
tanf: [false],
wic: [false],
noneOfTheAbove: [false]
});
}
In my HTML 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>
I need the last input field to ONLY uncheck all other checkboxes in this form group, I also need to be able to keep my validation as well, using ngModel caused issues with that since my form controls were not able to be registered.
Aucun commentaire:
Enregistrer un commentaire