Angular 2 Cookbook

Implementing basic forms with FormBuilder and formControlName

Out of the box, Angular provides a way for you to put together forms that don't rely on the template hierarchy for definition. Instead, you can use FormBuilder to explicitly define how you want to structure the form objects and then manually attach them to each input.

Note

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

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 ...