使用表单数组和 *ngFor 将输入字段添加到 table - Angular 2/5

Question

我是 Angular 5 的初学者，尝试使用表单数组将输入字段动态添加到 table。我在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。没有运气。提前致谢！抱歉，不能 post 图片，因为我的代表点数很低。

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>

使用表单数组和 *ngFor 将输入字段添加到 table - Angular 2/5

Adding input fields to a table using Form Array and *ngFor - Angular 2/5

ngfor

angular

formarray

formgroups

angular5