How to automatically check checkbox B and C when we check checkbox A

Issue

image

my thought I have three checkbox Lets say A,B and C. When i check checkbox A i want to check both checkbox B and C.And when i uncheck A i want to uncheck both B and C, I am using static data and formcontrolname.

code that i tried

 <div class="col-sm-6 " id="left">
          <div class=" col-sm-6">
          <section class="">
            <mat-checkbox (change)="$event.checked && patientPastHistoryForm.get('substanceAbuseAlcohol').setValue('Yes') &&
patientPastHistoryForm.get('substanceAbuseMarijuana').setValue('Yes')
"  color="primary" >Substance Abuse</mat-checkbox>
          </section>
          <section class="pleft ptop">
              <mat-checkbox color="primary"
              (change)="patientPastHistoryForm.get('substanceAbuseAlcohol').setValue(
                $event.checked ? 'Yes' : 'No')"
               >Alcohol</mat-checkbox><br>
              <mat-checkbox (change)="patientPastHistoryForm.get('substanceAbuseMarijuana').setValue(
                $event.checked ? 'Yes' : 'No')" color="primary" >Marijuana</mat-checkbox><br>
              <mat-form-field>
                <mat-label>Other</mat-label>
                <input type="other" matInput formControlName="substanceAbuseOther" 
                placeholder="">
              </mat-form-field>
          </section> 
       </div> 

form

this.patientPastHistoryForm = new FormGroup({
      patientId: new FormControl(this.clientId),
      substanceAbuseAlcohol: new FormControl('No'),
      substanceAbuseMarijuana: new FormControl('No'),});

Solution

We should set formControl value as true/false for checkbox. I created a stackblitz for this issue. Please take a look https://stackblitz.com/edit/angular-ivy-wmaemx?file=src%2Fapp%2Fapp.component.ts

Answered By - Ghulam Haidar