Bundling controls with a FormGroup

Naturally, forms in applications frequently exist to aggregate multiple instances of input into a unified behavior. One common behavior is to assess whether a form is valid, which of course requires that all of its subfields are valid. This will most commonly be achieved by bundling multiple FormControl objects into a FormGroup. This can be done in different ways, with varying degrees of explicitness. This recipe covers an entirely explicit implementation, that is, everything here will be created and "joined" manually.

Note

The code, links, and a live example related to this recipe are available at http://ngcookbook.herokuapp.com/3052.

Getting ready

Suppose you began with the following skeleton application:

[app/article-editor.component.ts] 
 
import {Component} from '@angular/core';  
 
@Component({ 
  selector: 'article-editor', 
  template: ` 
    <p>Title: <input></p> 
    <p>Text: <input...