如何解决 FormControlName 在响应式表单中为每个表行重复？答案

【问题标题】：How to solve FormControlName getting repeated for each table row in reactive forms?如何解决 FormControlName 在响应式表单中为每个表行重复？
【发布时间】：2021-11-20 04:24:53
【问题描述】：

我有一个添加列和行的响应式表单。如果检查表单，并且如果我们添加多行，则 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>

打字稿代码部分

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;
    }
  }

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

【问题讨论】：

标签： javascript angular typescript angular-reactive-forms form-control

【解决方案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

【讨论】：