Reactive Forms Basics

Reactive Forms Basics

Reactive forms manage inputs in code with FormControl and FormGroup objects. You define the model explicitly, which makes validation and testing straightforward.

Build a form model

Create groups and controls in the component:

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

profileForm = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email]),
});

Bind it to the template

Wire the form model into the HTML with formGroup and formControlName:

<form [formGroup]="profileForm" (ngSubmit)="submit()">
  <input formControlName="name" />
  <input formControlName="email" />
  <button type="submit">Save</button>
</form>

Typing updates the matching control automatically.

Read values and status

The whole form value is available as an object:

submit() {
  console.log(this.profileForm.value);
  console.log(this.profileForm.valid);
}

Validation feedback

Check individual controls for errors and show messages:

<div *ngIf="profileForm.controls.name.invalid &&
     profileForm.controls.name.touched">
  Name is required
</div>

invalid and touched combine so errors appear only after the user has visited the field.

Nested groups and arrays

FormGroup nests inside FormGroup for sections, and FormArray repeats a group for dynamic lists of inputs, like addresses or tags. Everything stays typed and testable without touching the DOM.

Key Points

• FormControl and FormGroup model the form in code.
• formGroup and formControlName connect model to template.
• Validators express required and format rules.
• Check touched and invalid for user-friendly messages.
• FormArray repeats controls for dynamic lists.