FormGroup中的矩阵[Angular 2+]

Question

我需要创建用于生成矩阵的接口。我有两个输入，例如宽度和高度，以及取决于宽度和高度的输入矩阵。

我无法使此输入唯一，因此它们将正确绑定到类中的矩阵。

因此有人可以共享创建双向数据绑定矩阵的解决方案，一些技巧也将有所帮助。

我已经尝试了FormGroup的某些功能，但是在找到FormArray之后。可悲的是没有像FormMatrix这样的东西。

HTML：

<p *ngFor="let itemX of createArrayAndFill(thirdData.x);">
    <mat-form-field *ngFor="let itemY of createArrayAndFill(thirdData.y);">
        <input [(ngModel)]="thirdData.matrix[itemX][itemY]" matInput name="item--{{itemX}}--{{itemY}}"
            placeholder="Значення {{itemX}} {{itemY}}" formControlName="matrixControl">
    </mat-form-field>
</p>

带有数据的JS：

createArrayAndFill(n: number) {
    return Array(n).fill(0).map((item, i) => i)
}
thirdData = {
    x: 3, y: 3, matrix: [[1.1, 0.8, 0.9],
    [6.1, 3.2, 0.4],
    [-0.4, 0.2, 8.7]]
}

也是Angular版本7。

Answer 1

请参见stackblitz，如果您想使用箭头键在桌子上移动，请参见this answer in stackoverflow

TS代码：

rows=5;
cols=3;
form=new FormArray([]);

ngOnInit()
{
  for (let i = 0; i < this.rows; i++) {
      this.form.push(new FormArray([]))
      for (let j = 0; j < this.cols; j++) {
        (this.form.at(i) as FormArray).push(new FormControl())
      }
  }
}

HTML代码：

<form [formGroup]="form">
  <div *ngFor="let row of form.controls;let i=index">
    <input *ngFor="let col of row.controls" [formControl]="col">
  </div>
</form>