mat-checkbox：复选框默认勾选，相互影响？

Question

我的RactiveForm 中有 7 个复选框。这就是我使用FormArray 生成它们的方式：

ts：

  weekDaysDe: string[] = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'];

  taskForm: FormGroup = this.formBuilder.group({
    weekDays: this.formBuilder.array([
      this.formBuilder.control(false),
      this.formBuilder.control(false),
      this.formBuilder.control(false),
      this.formBuilder.control(false),
      this.formBuilder.control(false),
      this.formBuilder.control(false),
      this.formBuilder.control(false),
    ]),
  });

html:

      <!-- weekdays -->
      <div class="task-form-control" *ngIf="isRecurrent">
        <mat-label>Tage</mat-label>
        <div class="weekdays" formArrayName="weekDays">
          <mat-checkbox
            *ngFor="
              let weekDay of taskForm.get('weekDays').value;
              let i = index
            "
            color="primary"
            labelPosition="before"
            [formControlName]="i"
            >{{ weekDaysDe[i] }}</mat-checkbox
          >
        </div>
      </div>

复选框按预期呈现，但有两个问题：

1. 一开始都是检查的
2. 他们互相勾选/取消勾选。例如，当我检查第一个时，最后一个也会被检查

我做错了什么？

Answer 1

在模板中，使用表单数组控件通过 *ngFor 进行迭代。

试试这个：

 <div class="weekdays" formArrayName="weekDays">
            <mat-checkbox *ngFor="
              let weekDay of weekDaysArray.controls;
              let i = index
            " color="primary" labelPosition="before" [formControlName]="i">{{ weekDaysDe[i] }}
            </mat-checkbox>
   </div>

使用像这样的 getter 方法访问 FormArray 控件。

componen.ts

 get weekDaysArray() : FormArray{
    return this.taskForm.get('weekDays') as FormArray;
  }

Example