Implementing basic forms with NgForm

The basic denominations of Angular forms are FormControl, FormGroup, and FormArray objects. However, it is often not directly necessary to use these objects at all; Angular provides mechanisms with which you can implicitly create and assign these objects and attach them to the form's DOM elements.

Note

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

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><input placeholder="Article title"></p> 
    <p><textarea placeholder="Article text"></textarea></p> 
    <p><button (click)="saveArticle()">Save</button></p> 
  ` 
}) 
export class ArticleEditorComponent...