Implementing basic field validation with a FormControl

The simplest form behavior imaginable would be the validation of a single input field. Most of the time, utilizing <form> tags and going through the rest of the boilerplate is good practice, but for the purpose of checking a single input, it's preferable to distill this down to the bare minimum required in order to use input checking.

Note

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

Getting ready

Suppose the following is your initial setup:

[app/article-editor.component.ts] 
 
import {Component} from '@angular/core'; 
 
@Component({ 
  selector: 'article-editor', 
  template: ` 
    <p>Article title (required):</p> 
    <input required> 
    <button>Save</button> 
    <h1>{{title}}</h1> 
  ` 
}) 
export class ArticleEditorComponent { 
  title:string; 
} 

Your goal is to change this in a way that...