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.


The code, links, and a live example related to this recipe are available at

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

Get Angular 2 Cookbook now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.