javascript - 如何在数据网格的列标题和行中动态添加复选框？

Question

我想使用 Angular react 形式在标题中添加复选框(之前 - 星期一、星期二......)并在数据网格中动态添加行。

Week1、Week2.. 值通过数组进行循环

weeks = ['Week1','Week2','Week3','Week4']

类似地，列标题也会在另一个天数数组中循环。

需要知道一些使用响应式(Reactive)表单的 FormArray 来实现列标题和所有行中的复选框的方法。

有人可以帮忙吗？

Answer 1

这是一种可能的方法来完成我认为你想做的事情:

1 - 生成 FormGroup

  days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
  weeks = ['Week1', 'Week2', 'Week3'];
  formGroup: FormGroup;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.formGroup = this.fb.group({
      weeks: this.fb.array(this.initFormDatas())
    });
    console.log(this.formGroup);
  }

  initFormDatas() {
    const groups = [];
    this.weeks.forEach((week) => {
      groups.push(this.fb.array(this.initDaysFormControls(week)));
    });
    return groups;
  }

  initDaysFormControls(week) {
    const controls = [];
    this.days.forEach((days) => {
      controls.push(new FormControl());
    });
    return controls;
  }

您可以轻松调整的简化 HTML:onWeekSelected 是一个简单的函数，允许您选择或取消选择列的每个复选框

<form [formGroup]="formGroup" (ngSubmit)="submitForm()">
  <table>
    <thead>
      <th *ngFor="let day of days">
        <input type="checkbox" (change)="onWeekSelected($event)" /> {{ day }}
      </th>
    </thead>
    <tbody formArrayName="weeks">
      <tr *ngFor="let week of weeks; let weekIndex=index">
        <td> {{ week }} </td>
        <ng-container [formArrayName]="weekIndex">
          <td *ngFor="let day of days; let dayIndex=index">
            <input type="checkbox" [formControlName]="dayIndex" />
          </td>
        </ng-container>
      </tr>
    </tbody>
  </table>

  <button type="submit"> Submit </button>
</form>

提交时的结果:

  submitForm() {
    console.log(JSON.stringify(this.formGroup.value));
  }