2 formarray 内的嵌套复选框 - angular material

Question

我正在尝试用 angular material 做一个嵌套的复选框，我在另一个里面使用一个 formarray，复选框的第一个列表（天）工作正常（我认为是这样），但是第二个列表（转) 我有麻烦，这会同时检查所有复选框而不是一个，我尝试将 formControlName 与 ngModel 一起使用，但我无法解决它。这是我的代码，问题在于：

<section class="section">
          <div formArrayName="dias" >
            <div *ngFor="let dia of diaFormArray.controls; let i = index" [formGroupName]="i" class="dias" >
              <mat-checkbox  class="example-margin" [(ngModel)]="this.diaFormArray.controls[i].value['dia'].checked"
              [ngModelOptions]="{standalone: true}">{{this.diaFormArray.controls[i].value['dia'].nombre}}</mat-checkbox>

              <div formArrayName="turnos">
                <div *ngFor="let turno of getDiaTurnos(i).controls; let j=index"  >
                   <mat-checkbox class="example-margin"
              id="turno{{i}}-{{j}}"
              [(ngModel)]="getDiaTurnos(i).controls[j].value['turno'].checked"
                [ngModelOptions]="{ standalone: true }">
              {{turnos[j].nombre}}
              </mat-checkbox>
                </div>
                </div>
              </div>
          </div>
          <pre>{{form.value | json}}</pre>
        </section>

这是图片 https://drive.google.com/file/d/1lmqJMuUMki1wCAe6ChurNXmOH646bPx3/view?usp=sharing

所有项目

https://stackblitz.com/edit/angular-ivy-w2kdcw?embed=1&file=src/app/app.component.html

有人知道我该如何继续吗？

Answer 1

我明白你的意思，但你走错了路。由于您使用的是 Reactive Forms，坚持使用它们 并避免乱用 ngModel。

我已经 fork 你的项目并对其进行了调整，因此它可以按你的需要工作。检查一下 here.

此外，我添加了一个功能，即 checks/unchecks 所有 turnos 复选框都位于 dia 内，每次您按下dia 复选框。

private setListeners(): void {
  this.diaFormArray.controls.forEach((diaGroup: FormGroup) => {
    diaGroup.controls['checked'].valueChanges.subscribe((value) => {
      (
        (diaGroup.controls['turnos'] as FormArray).controls as FormGroup[]
      ).forEach((turnoGroup: FormGroup) => {
        turnoGroup.controls['checked'].setValue(value);
      });
    });
  });
}

理想情况下，您将在销毁组件时取消订阅此 valueChanges 订阅。

2 formarray 内的嵌套复选框 - angular material

nested checkbox inside 2 formarray - angular material

checkbox

nested-loops

multidimensional-array

angular-material

angular