Skip to content

Chapter 4 of 7

Reactive Forms

Angular offers two approaches to handling forms. Template-driven forms use directives like ngModel in the template and are simpler for basic forms, while reactive forms use FormGroup and FormControl in the component class, offering more control, easier testing, and better handling of dynamic or complex forms. Reactive forms require importing ReactiveFormsModule. A reactive form is created by instantiating a FormGroup that contains FormControl instances, each with a default value and an optional array of Validators. The form is bound in the template with [formGroup] and individual inputs with formControlName.

FormBuilder is an injectable service that provides shorthand syntax for creating FormGroup, FormControl, and FormArray instances, using array notation to specify initial values and validators. Since Angular 14, FormBuilder.nonNullable produces typed, non-nullable controls where initial values are required and reset() restores them. FormArray manages a dynamic list of FormControls or FormGroups, useful for repeating form sections whose count changes, with methods like push() and removeAt(). FormRecord is similar to FormGroup but supports dynamic keys, useful when the field set is not known at compile time. Typed reactive forms infer control types automatically, so this.form.controls.name.value is correctly typed as string rather than any, with FormControl<string | null> for nullable cases.

Validators can be composed in arrays and applied to controls, and errors from all validators are aggregated on the control's errors property. Cross-field validators receive the full AbstractControl (typically a FormGroup) and validate across fields, for example checking that password and confirm match. Async validators return an Observable or Promise that resolves to validation errors, ideal for server-side checks like unique email validation; call updateValueAndValidity() to re-run them. The updateOn option changes when a control's value is updated and validated, with options of 'change' (the default), 'blur', or 'submit'. Reactive forms track control state with flags: markAsDirty and markAsPristine for user-interaction tracking, and markAsTouched and markAsUntouched for focus tracking, both used to control when error messages appear. valueChanges emits the new value whenever the form value changes, while statusChanges emits the new VALID, INVALID, PENDING, or DISABLED status when validation state changes.

All chapters
  1. 1Angular Foundations
  2. 2Templates, Directives, and Pipes
  3. 3Routing and Navigation
  4. 4Reactive Forms
  5. 5RxJS and HTTP
  6. 6Modern Angular: Signals, Standalone, and Control Flow
  7. 7Dependency Injection, Change Detection, and Tooling

Drill it

Reading is not remembering. These come from the Angular Framework deck:

Q

What is Angular?

Angular is a TypeScript-based front-end framework developed by Google for building dynamic, single-page applications (SPAs). It provides a comprehensive solutio...

Q

What is an Angular component?

A component is the fundamental building block of an Angular application. It consists of:A TypeScript class decorated with @Component()An HTML templateOptional C...

Q

What is the purpose of the @Component decorator?

The @Component() decorator marks a class as an Angular component and provides metadata that tells Angular how to process, instantiate, and use the component at...

Q

What is data binding in Angular?

Data binding is a mechanism that connects the component class to the template. Angular supports four forms:Interpolation: {{ expression }}Property binding: [pro...