如何解决 FormControlName 以反应形式为每个 table 行重复？

Question

我有一个添加列和行的反应形式。如果检查表单，并且如果我们添加多行，则 formControlName 会为每一行重复。

我想为每行的列递增 formControlNames。

第 1 行 -> 两列 (formControlNames --> 0, 1)

第 2 行 -> 两列 (formControlNames --> 0, 1)

到

第 1 行 -> 两列 (formControlNames --> 0, 1)

第 2 行 -> 两列 (formControlNames --> 2, 3)

当前代码添加到 Stackblitz :

https://stackblitz.com/edit/angular-xmmp95?file=src%2Fapp%2Fapp.component.ts

https://angular-xmmp95.stackblitz.io/

我已经尝试了一些解决方法，但是所有的 formControlNames 都在更新，最后添加的 formControlName 也即将更新。

HTML 代码部分

<form [formGroup]="rubricForm">
    <table class="table mt-5">
        <thead>
            <tr>
                <th></th>
                <th class="tableHeader" scope="col" formArrayName="scoreHeaders" *ngFor="let col of scoreHeaders.controls; let i = index"><input pInputText type="text" 
                    [formControlName]="i"></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let col of leftHeaders.controls; let i = index">
                <th formArrayName="leftHeaders" scope="row">
                    <span>
                        <input pInputText type="text" name="criteria-field" placeholder="Enter Criteria" [formControlName]="i" required />
                    </span>
                </th>
                <td formArrayName="cells" *ngFor="let col of cells.controls; let j = index">
                    <textarea pInputTextarea name="criteria-val" [cols]="30" [rows]="5" [formControlName]="setFormControlName()"></textarea>
                </td>
            </tr>
        </tbody>
    </table>
</form>

Typescript 代码部分

setFormControlName(): any {
    let leftHeaderLen = this.leftHeaders.length;
    let scoreHeaderLen = this.scoreHeaders.length;
    let result = 0;
    if ((leftHeaderLen && scoreHeaderLen) === 1) {
      result = 0
      return result;
    }
    else {
      result = (leftHeaderLen + scoreHeaderLen) - (leftHeaderLen + 1);
      console.log(`inside second loop ${result}`);
      return result;
    }
  }

完整的代码在上面的link中添加。提前致谢。

Answer 1

Reactive Forms 很棘手我稍后会添加一个解决方案，但现在我建议您使用 ngModel 而不是 ReactiveForms。

显然您需要二维操作

让我们假设初始状态：

top = [];
left = [];
data = [[]];

我们需要行或列添加逻辑：

addColumns() {
    this.top.push('');
    this.data.forEach((row) => {
      row.length < this.top.length ? row.push('') : null;
    });
  }


addRows() {
    this.left.push('');
    this.data.push(new Array(this.top.length).fill(''));
  }

您可以在此处找到还添加了更改检测的有效解决方案：

https://stackblitz.com/edit/angular-2kgmkh?file=src/app/app.component.html

如何解决 FormControlName 以反应形式为每个 table 行重复？

How to solve FormControlName getting repeated for each table row in reactive forms?

javascript

typescript

form-control

angular

angular-reactive-forms