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

Get Angular 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.