Angular 2 form with array of object inputs
<p>I'm building an invoicing app to learn Angular2. The issue I am hitting is how to build the line item component where a line contains 3 inputs that should come from and bind to an object in an array of line item.</p>

<p>In angular 1, I can easily achieve this by adding an <code>ng-form</code> directive to the container of the inputs. What is the equivalent here?</p>

<p>Here is my code:</p>

<p>HTML:</p>

<pre><code>&lt;form name="form" ng-submit="$ctrl.submit(form)" novalidate&gt;

&lt;!-- some more code --&gt;

&lt;ul class="list invoice-table__body"&gt;
  &lt;li *ngFor="let item of model.lineItems; let i = index"&gt;
    &lt;input
      type="text"
      name="description"
      class="col-sm-8"
      [(ngModel)]="item.description"&gt;

    &lt;input
      type="number"
      name="quantity"
      class="col-sm-2"
      [(ngModel)]="item.quantity"&gt;

    &lt;input
      type="number"
      name="total"
      class="col-sm-2"
      [(ngModel)]="item.total"&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;!-- some more code --&gt;

&lt;/form&gt;
</code></pre>

<p>Component:</p>

<pre><code>import { Component } from '@angular/core';
import { Invoice } from './invoice.model';
import { InvoiceLineItems } from './invoice-line-item.model';

@Component({
  selector: 'create-invoice',
  templateUrl: 'create-invoice/create-invoice.html'
})
export class CreateInvoiceComponent {
  model: Invoice = new Invoice(
    85,
    'CAD',
    null,
    [ // lineItems
      new InvoiceLineItems('Web development for BAnQ'),
      new InvoiceLineItems('Sept 1 to 3', 14, 910),
      new InvoiceLineItems('Sept 5 to 10', 34, 5293),
      new InvoiceLineItems('Sept 11 to 20', 24, 5293),
      new InvoiceLineItems('Sept 21 to 38', 11, 2493),
    ],
    13989,
    100,
    200,
    15000,
    '',
    null,
    '$'
  );

  getTotal(): number {
    return this.model.lineItems.reduce(
      (a, b): number =&gt; a + (isNaN(b.total) ? 0 : b.total),
      0);
  }
}
</code></pre>