Angular 32: Reactive Forms Basics
easy⏱ 5 mincourseangular
The form model lives in the class, not the template
A FormGroup is a named bag of FormControls (or nested FormGroups/FormArrays). Building it in TypeScript means the entire shape, initial values, and — soon — validation rules are all in one place, readable without scrolling through a template.
form = new FormGroup({
name: new FormControl(''),
email: new FormControl(''),
message: new FormControl(''),
});
inject(FormBuilder): the same model, less boilerplate
FormBuilder is a small injectable service with .group(), .control(), and .array() helper methods that build the exact same FormGroup/FormControl/FormArray instances you'd build by hand with new, just with less typing. inject(FormBuilder) grabs it without a constructor.
private fb = inject(FormBuilder);
form = this.fb.group({
name: [''],
email: [''],
message: [''],
});
[formGroup] on the tag, formControlName on each field
[formGroup]="form" on the <form> element tells Angular which model to bind to; formControlName="name" on each input then connects that specific field by key. Unlike [(ngModel)], there's no two-way binding syntax needed — the FormControl instance itself is the single source of truth.