Reactive Forms

FormGroup & FormControl

A FormGroup bundles several FormControls. It's defined and driven from the component class.

import { FormGroup, FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({ standalone: true, imports: [ReactiveFormsModule], template: `...` })
export class SignupComponent {
  form = new FormGroup({
    email: new FormControl(''),
    password: new FormControl(''),
  });

  onSubmit() {
    console.log(this.form.value);
  }
}

Binding it in the template

[formGroup] connects the template to the model; formControlName links each input to its control.

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="email">
  <input formControlName="password" type="password">
  <button type="submit">Sign up</button>
</form>

When to choose it

Reactive forms scale better for complex, dynamic, or heavily-tested forms — the model is explicit and easy to unit test.