Показать элемент управления формы в div

Question

У меня есть угловая реактивная вложенная форма.

this.productsForm = new FormGroup({
        "products": this.productFormArray
      });
    });
  }

  getProducts() {
    var ctrls = (<FormArray>this.productsForm.get('products')).controls;
    return ctrls;
  }

Я перебираю массив форм и успешно устанавливаю значения во входных данных

<div form [formGroup]="productsForm" >
<table formArrayName="products">
    <tr *ngFor="let element of getProducts(); let i=index"  [formGroupName]="i">
    <td>
    <input formControlName="productCode" />
    <span formControlName="productCode">{{element.productCode}}</span>
    </td>
    </tr>
</table>
</div>

Однако я не могу установитьто же значение в диапазоне.Есть ли способ сделать это?

Answer 1

Я решил это путем перебора исходного массива вместо формы. Я нормальная форма с только входами я бы перебрать форму. Однако здесь мне нужно перебрать массив. Итак, вместо

<div form [formGroup]="productsForm" >
<table formArrayName="products">
    <tr *ngFor="let element of getProducts(); let i=index"  [formGroupName]="i">
    <td>
    <input formControlName="productCode" />
    <span formControlName="productCode">{{element.productCode}}</span>
    </td>
    </tr>
</table>
</div>

Я сейчас использую:

<div form [formGroup]="productsForm" >
    <table formArrayName="products">
        <tr *ngFor="let element of dataSource; let i=index"  [formGroupName]="i">
        <td>
        <input formControlName="productCode" />
        <span formControlName="productCode">{{element.productCode}}</span>
        </td>
        </tr>
    </table>
    </div>

Может, у кого-нибудь есть лучшее решение?