title: Angular 2 form with array of object inputs
body: <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>