将动态值添加到Angular 4中表格内的输入字段

Question

我正在尝试实现一个动态行表，其中所有表格单元格都是输入字段。 有一些预加载的数据，但我无法添加到视图中加载的数据。但是添加/删除行工作正常。我已经尝试过 ngModel 和 value，但它不起作用。

app.component.html：

    <table>
            <thead>
                <button (click)="onAddRow()" *ngIf="addForm.get('rows')">add row</button>
            </thead>
            <tbody>
                <tr *ngFor="let row of addForm.get('rows')?.controls;let index = index;">
          <!-- NOT WORKING with ngModel
          <td>name : <input [ngModel]="row.get('name')" [formControl]="row.get('name')"></td> -->
            <!-- NOT WORKING with value attribute
          <td>name : <input value="row.get('name')" [formControl]="row.get('name')">\</td> -->
          <td>
            name : <input  [formControl]="row.get('name')">
          </td>
          <td>
            description : <input [formControl]="row.get('description')">
          </td>
          <td>
            qty : <input [formControl]="row.get('qty')">
          </td>
          <td>
            <button (click)="onRemoveRow(index)">Remove</button>
          </td>
                </tr>
            </tbody>
        </table>

app.component.ts：

import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl, FormArray, NgForm } from '@angular/forms'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  addForm: FormGroup;
  rows: FormArray;
  itemForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.addForm = this.fb.group({
      items: [null, Validators.required],
      items_value: ['no', Validators.required]
    });
    this.rows = this.fb.array([{
    "name": "Test Item",
    "description": "Dedsc",
    "qty": "q23"
  }]);

  }

  ngOnInit() {
    this.addForm.get("items").valueChanges.subscribe(val => {
      if (val === true) {
        this.addForm.get("items_value").setValue("yes");

        this.addForm.addControl('rows', this.rows);
      }
      if (val === false) {
        this.addForm.get("items_value").setValue("no");
        this.addForm.removeControl('rows');
      }
    });
  }

  onAddRow() {
    this.rows.push(this.createItemFormGroup());
  }

  onRemoveRow(rowIndex:number){
    this.rows.removeAt(rowIndex);
  }

  createItemFormGroup(): FormGroup {
    return this.fb.group({
      name: null,
      description: null,
      qty: null
    });
  }

}

我的输出：

预期输出：

还提供一个Stackblitz Example 以供更好的参考。

Answer 1

您不需要[ngModel]，因为您已经在使用响应式表单。这些输入为空，因为您使用 null 值创建了每个项目表单组。如果您已经预加载了数据，您需要将其作为每个控件的初始值传递给createItemFormGroup 方法，或者通过表单数组或适当表单组的setValue/patchValue 方法更新值。

Answer 2

我不确定这是否正是您想要的，但请查看以下内容： https://stackblitz.com/edit/dynamically-add-rows-k2lbkw

• 我用 formControlName 替换了 formControl 属性。注意 value 属性

<td>
     name : <input  formControlName="name" 
                   [ngModel]="row.get('name').value" >
</td>

• 将名称、描述、数量添加到表单构建器对象中。

    constructor(private fb: FormBuilder) {
        this.addForm = this.fb.group({
          items: [null, Validators.required],
          items_value: ['no', Validators.required],
          name: [null, Validators.required],
          description: [null, Validators.required],
          qty: [null, Validators.required]
        });
        this.rows = this.fb.array([]);
      }

• 并在 createItemFormGroup 方法中添加了一些虚拟值