Добавить значение Dynami c в поле ввода внутри таблицы в Angular 4

Question

Я пытаюсь реализовать динамическую c таблицу строк, в которой все ячейки таблицы являются полями ввода. Есть некоторые предварительно загруженные данные, но я не могу добавить к загруженным данным в представлении. Однако строки добавления / удаления работают правильно. Я пробовал 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
    });
  }

}

Мой вывод:

Expected output:

Also putting one Пример Stackblitz для лучшей справки.

Answer 1

Вам не нужно [ngModel], потому что вы уже работаете с реактивными формами. Эти входные данные пусты, потому что вы создаете каждую группу форм элемента со значениями null. Если у вас есть предварительно загруженные данные, вам необходимо передать их в качестве начального значения для каждого элемента управления в методе createItemFormGroup или обновить значение методами setValue/patchValue массива форм или соответствующей группы форм.

Answer 2

Я не уверен, что это будет именно то, что вы хотите, но проверьте это: https://stackblitz.com/edit/dynamically-add-rows-k2lbkw

• Я заменил атрибут formControl на formControlName. Обратите внимание на значение свойство

<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