Angular2: reactive v. template-driven form

reactive-form.component.ts

import { Component, OnInit } from '@angular/core'
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'

@Component({
  selector: 'reactive-form',
  template:
`
<form [formGroup]="myForm" (ngSubmit)="submit()">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" class="form-control" id="name"
           formControlName="name">
  </div>
  <div class="form-group">
    <label for="quantity">Quantity</label>
    <input type="number" class="form-control" id="quantity"
           formControlName="quantity">
  </div>

  <div class="form-group">
    <input type="submit" class="form-control" value="Submit"
           [disabled]="myForm?.invalid">
  </div>
</form>

<h6>FormGroup Model (<code>myForm.value</code>)</h6>
<div><pre><code>{{ myForm?.value | json }}</code></pre></div>
`
})
export class ReactiveFormComponent implements OnInit {

  myForm: FormGroup;

  constructor(
    private fb: FormBuilder
  ) {}

  ngOnInit() {
    // build the form model
    this.myForm = this.fb.group({
      name: new FormControl('', Validators.required),
      quantity: this.fb.control(123)
    })
  }

  submit() {
    console.log("Reactive Form submitted: ", this.myForm);
  }
}