Блог

Главная - Вопросы по программированию - как отключить флажок, когда установлен любой другой флажок angular 7

как отключить флажок, когда установлен любой другой флажок angular 7

#angular-material #angular7

#angular-материал #angular7

Вопрос:

 <div>
  <mat-checkbox formControlName="A">A</mat-checkbox>
  <mat-checkbox formControlName="B">B</mat-checkbox>
  <mat-checkbox formControlName="C">C</mat-checkbox>
  <mat-checkbox formControlName="D">D</mat-checkbox>
  <mat-checkbox formControlName="E">E</mat-checkbox>
  <mat-checkbox formControlName="F">F</mat-checkbox>
  <mat-checkbox formControlName="Z">Z</mat-checkbox>   
</div>

Мне нужно отключить флажок Z, если установлен какой-либо другой флажок.А также, если установлен флажок Z, мне нужно отключить все другие флажки.

Как этого добиться?

Комментарии:

1. Похоже, вы ищете переключатель , а не флажок.

Ответ №1:

Вам необходимо реагировать на событие изменения для каждого флажка и соответствующим образом включать или отключать элементы управления формой флажка:

 <mat-checkbox formControlName="A" (change)="checkboxAFChanged($event.checked)">A</mat-checkbox>
<mat-checkbox formControlName="B" (change)="checkboxAFChanged($event.checked)">B</mat-checkbox>
<mat-checkbox formControlName="C" (change)="checkboxAFChanged($event.checked)">C</mat-checkbox>
<mat-checkbox formControlName="D" (change)="checkboxAFChanged($event.checked)">D</mat-checkbox>
<mat-checkbox formControlName="E" (change)="checkboxAFChanged($event.checked)">E</mat-checkbox>
<mat-checkbox formControlName="F" (change)="checkboxAFChanged($event.checked)">F</mat-checkbox>
<mat-checkbox formControlName="Z" (change)="checkboxZChanged($event.checked)">Z</mat-checkbox>

TS:

 checkboxAFChanged(checked) {
  if (checked) {
    this.formGroup.controls.Z.disable();
  } else if (!(this.formGroup.controls.A.value 
      || this.formGroup.controls.B.value 
      || this.formGroup.controls.C.value 
      || this.formGroup.controls.D.value 
      || this.formGroup.controls.E.value 
      || this.formGroup.controls.F.value)) {
    this.formGroup.controls.Z.enable();
  }
}

checkboxZChanged(checked) {
  this.enableControl(this.formGroup.controls.A, !checked);
  this.enableControl(this.formGroup.controls.B, !checked);
  this.enableControl(this.formGroup.controls.C, !checked);
  this.enableControl(this.formGroup.controls.D, !checked);
  this.enableControl(this.formGroup.controls.E, !checked);
  this.enableControl(this.formGroup.controls.F, !checked);
}

enableControl(control: AbstractControl, enabled: boolean) {
  if (enabled) {
    control.enable();
  } else {
    control.disable();
  }
}