vendredi 12 juillet 2019

Validate form group that contains inputs with checkboxes, should display error message if no checkboxes are selected

I need to display a validation error message if no checkboxes in my form group are checked. No jquery can be used, all has to be done with angular 7. This is in a reactive form. I've tried setting ngIf conditions, and apply conditional validation functions, none have been working. This is one section in my form group containing the checkboxes

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

This is a section of the HTML

<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>
   </form>
</div>

When checking one of the boxes, the value should change from false to true, and if unselected, should change from true to false.




Aucun commentaire:

Enregistrer un commentaire