2个formarray内的嵌套复选框 - 角度材料

Posted 2023-02-19

【中文标题】2个formarray内的嵌套复选框 - 角度材料

【英文标题】：nested checkbox inside 2 formarray - angular material

【发布时间】：2022-01-18 18:18:31

【问题描述】：

我正在尝试使用有角材料做一个嵌套复选框，我在另一个里面使用一个 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="turnoi-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

有人知道我该怎么做吗？

【参考方案1】：

我明白你的意思，但你走错路了。由于您使用的是响应式表单，请坚持使用它们，并避免使用 ngModel。

我已经分叉了您的项目并对其进行了调整，因此它可以根据您的需要运行。检查它here。

另外，我添加了一个功能，每次按下 dia 复选框时，都会选中/取消选中 dia 内的所有 turnos 复选框.

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 订阅。

【讨论】：

谢谢，它有效，我会听从你的建议。

不客气！如果您认为这是正确答案，请将其标记为已接受，以便其他人也可以从中受益。