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

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  id="left">
          <div >
          <section >
            <mat-checkbox (change)="$event.checked && patientPastHistoryForm.get('substanceAbuseAlcohol').setValue('Yes') &&
patientPastHistoryForm.get('substanceAbuseMarijuana').setValue('Yes')
"  color="primary" >Substance Abuse</mat-checkbox>
          </section>
          <section >
              <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'),});

CodePudding user response：

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/app/app.component.ts

CodePudding user response：

Maybe this can help you. Source - https://material.angular.io/components/checkbox/overview

HTML file

<section >
  <span >
    <mat-checkbox 
                  [checked]="allComplete"
                  [color]="task.color"
                  [indeterminate]="someComplete()"
                  (change)="setAll($event.checked)">
      {{task.name}}
    </mat-checkbox>
  </span>
  <span >
    <ul>
      <li *ngFor="let subtask of task.subtasks">
        <mat-checkbox [(ngModel)]="subtask.completed"
                      [color]="subtask.color"
                      (ngModelChange)="updateAllComplete()">
          {{subtask.name}}
        </mat-checkbox>
      </li>
    </ul>
  </span>
</section>

Component file

  task: Task = {
    name: 'Indeterminate',
    completed: false,
    color: 'primary',
    subtasks: [
      {name: 'Primary', completed: false, color: 'primary'},
      {name: 'Accent', completed: false, color: 'accent'},
      {name: 'Warn', completed: false, color: 'warn'},
    ],
  };

  allComplete: boolean = false;

  updateAllComplete() {
    this.allComplete = this.task.subtasks != null && this.task.subtasks.every(t => t.completed);
  }

  someComplete(): boolean {
    if (this.task.subtasks == null) {
      return false;
    }
    return this.task.subtasks.filter(t => t.completed).length > 0 && !this.allComplete;
  }

  setAll(completed: boolean) {
    this.allComplete = completed;
    if (this.task.subtasks == null) {
      return;
    }
    this.task.subtasks.forEach(t => (t.completed = completed));
  }