angular - 使用 Form Array 和 *ngFor - Angular 2/5 向表中添加输入字段

Question

我是 Angular 5 的初学者，试图将输入字段动态添加到带有表单数组的表中。我在 tr 标签中使用了 *ngFor ，示例代码如下：

HTML 文件：

          <table class="table">
              <thead>
                  <tr>
                      <th>F1</th>
                      <th>F2</th>
                  </tr>
              </thead>
              <form novalidate role="form" [formGroup]="caseinfo">
              <div formArrayName="caseRows">
              <tbody>
                  <tr *ngFor="let caserow of caseinfo.controls.caseRows.controls; let i=index" [formGroupName]="i" >

                      <td>
                          <div class="form-group">
                              <input type="text" class="form-control" formControlName="caselpn">
                              </div>
                          </div>
                      </td>
                      <td>
                          <div class="form-group">
                              <input type="text" class="form-control" formControlName="casesku">
                          </div>
                      </td>
                  </tr>
              </tbody>
            </div>
            </form>

          </table>

TS 文件：

  initFormCase()
  {
    this.caseinfo = this.fb.group({
    caseRows: this.fb.array([this.initCaseRows()]) // here
    });
  }

  initCaseRows() {
    return this.fb.group({
    caselpn:[null, Validators.compose([
      Validators.required,
    ])],
    casesku:[null, Validators.compose([
      Validators.required,
    ])]
    });
    }

这是我的输出的样子： https ://i.imgur.com/ds4meaL.png

预期输出：F1 列下的输入字段 1。在 F2 列下输入字段 2。

注意：我也尝试替换 tbody 内的 ngFor 。没运气。提前致谢！抱歉，不能发布图片，因为我的代表点低。

Answer 1

您的 HTML 结构错误，请尝试如下更新并检查

<form novalidate role="form" [formGroup]="caseinfo">
    <div formArrayName="caseRows">
        <table class="table">
            <thead>
                <tr>
                    <th>F1</th>
                    <th>F2</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let caserow of caseinfo.controls.caseRows.controls; let i=index" [formGroupName]="i">
                    <td>
                        <div class="form-group">
                            <input type="text" class="form-control" formControlName="caselpn">
                        </div>
                    </td>
                    <td>
                        <div class="form-group">
                            <input type="text" class="form-control" formControlName="casesku">
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</form>