Angular2: reactive v. template-driven form

template-driven-form.component.ts

import { Component } from '@angular/core'

@Component({
  selector: 'template-driven-form',
  template:
`
<form #myForm="ngForm" (ngSubmit)="submit(myForm.form)">
  <div class="form-group">
    <label for="td_name" >Name</label>
    <input type="text" class="form-control" id="td_name"
           name="name" [ngModel]="''" required>
  </div>
  <div class="form-group">
    <label for="td_quantity">Quantity</label>
    <input type="number" class="form-control" id="td_quantity"
           name="quantity" [ngModel]="123">
  </div>
  <div class="form-group">
    <input type="submit" class="form-control" value="Submit"
           [disabled]="myForm.invalid">
  </div>
</form>

<h6>FormGroup Model (<code>#myForm.form.value</code>)</h6>
<div><pre><code>{{ myForm.form.value | json }}</code></pre></div>
`
})
export class TemplateDrivenFormComponent {

  submit(form: FormGroup) {
    console.log("Template-driven form submitted: ", form);
  }
}