Is there a way to display 'product.name' on the actual webpage using formbuilder? While it's working fine for the input field, I want to show the text in the first td tag:
<table class="editPackagesGeneralTable" formArrayName="products">
<tr><th class="first">Product / Gift</th><th>Description</th><th>Cost</th><th class="last">Quantity</th></tr>
<tbody>
<tr *ngFor="let product of myForm.controls.products.controls; let i=index" [formGroupName]="i"><td>{{product.name}}</td><td>{{product.description}}</td><td>{{product.unitCost}}</td><td><input type="hidden" formControlName="id" /><input type="text" formControlName="name" /></td></tr>
</tbody>
</table>
This is how I've written my TypeScript:
this.myForm = this.fBuilder.group({
products: this.fBuilder.array([])
});
this.httpService.getExtrasList()
.subscribe((res) => {
this.items = res.json();
console.log(res.json());
this.items.forEach(element => {
(<FormArray>this.myForm.get('products')).push(this.fBuilder.group({
id: [element.id],
name: [element.name]
}));
});
});