[(ngModel)] and array binding issue

When you bind input control to the element of the array you will find that input control does not display the updated value

export class InvoiceCreateComponent implements OnInit {
  products: Array<object> = [];
  ngOnInit(): void {
    this.products.push({
      desc: 'iPhone',
      rate: '$450',
      qty: 1,
      linetotal: '$450'
    });
  }
  addRow(): void {
    this.products.push({
      desc: 'iPhone',
      rate: '$450',
      qty: 1,
      linetotal: '$450'
    });
  }
}

You have the following code in template

    <tr *ngFor="let product of products;let i = index;">
          <td> <input  [(ngModel)]="products[i].desc" name="product[i].desc" /> {{products[i].desc}}</td>
          <td>{{product.rate}}</td>
          <td>{{product.qty}}</td>
          <td>{{product.linetotal}}</td>
     </tr>

When you update the input value you will have the following output

Data binding has failed here due to the name conflict of the ngForm

<form   ngNoForm  >
</form>

To avoid that problem you can use the ngNoForm with Form