Explain reactive forms architecture.

Angular Reactive Forms provide a model-driven approach to handling form inputs whose values change over time. They are built on a reactive programming paradigm, making forms more predictable, testable, and robust. This architecture emphasizes immutability, synchronous data flow, and explicit form controls.

Core Building Blocks

Reactive Forms are composed of several fundamental classes that define the structure and behavior of the form. These classes inherit from the AbstractControl base class, providing a common interface for interaction.

FormControl

A FormControl is the most basic building block, representing an individual input field (e.g., text input, checkbox, select). It tracks the value, validation status, and user interaction (e.g., touched, dirty) for a single form control. Each FormControl instance is a self-contained unit managing its own state.

import { FormControl } from '@angular/forms';

const nameControl = new FormControl(''); // Initial value is an empty string

FormGroup

A FormGroup aggregates a collection of FormControls (or other FormGroups/FormArrays) into a single entity. It represents a form as a whole or a subsection of a form. When you interact with a FormGroup, its value and validation status are derived from the aggregate of its child controls. It provides a way to manage related form fields as a unit.

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

const userForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  email: new FormControl('')
});

FormArray

A FormArray manages an array of AbstractControl instances (FormControls, FormGroups, or even other FormArrays). It's useful for dynamic forms where you need to add or remove identical sets of controls, such as a list of phone numbers or skills. Like FormGroup, its value and validation status are aggregated from its children.

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

const skillsForm = new FormGroup({
  skills: new FormArray([
    new FormControl('Angular'),
    new FormControl('TypeScript')
  ])
});

AbstractControl

FormControl, FormGroup, and FormArray all extend the AbstractControl class. This base class provides common properties and methods shared across all control types, such as: - value: The current value of the control. - status: The validation status ('VALID', 'INVALID', 'PENDING', 'DISABLED'). - valid/invalid: Boolean flags indicating validation status. - touched/untouched: Boolean flags indicating if the user has interacted with the control. - dirty/pristine: Boolean flags indicating if the value has changed from its initial state. - enable()/disable(): Methods to change the control's enabled state. - setValue()/patchValue(): Methods to update the control's value.

FormBuilder Service

The FormBuilder is an injectable helper service that provides a more convenient and concise syntax for creating instances of FormControls, FormGroups, and FormArrays. It reduces boilerplate code, especially for complex forms.

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

// In a component or service constructor:
constructor(private fb: FormBuilder) {}

// Creating a form group with FormBuilder:
const userProfileForm = this.fb.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]],
  address: this.fb.group({
    street: [''],
    city: ['']
  })
});

Validation

Validators are functions that are used to check the validity of a form control's value. Angular provides a set of built-in validators (e.g., Validators.required, Validators.minLength) and also allows for custom synchronous or asynchronous validators. Validators are typically passed as the second argument when instantiating a FormControl or FormArray/FormGroup using the FormBuilder.

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

const passwordControl = new FormControl('', [
  Validators.required,
  Validators.minLength(8),
  Validators.pattern(/^(?=.*[A-Z])(?=.*[a-z])(?=.*\d).*$/)
]);

// Checking validation status
console.log(passwordControl.valid); // boolean

Data Flow and View Integration

In Reactive Forms, the form model (FormGroup, FormControl instances) is defined explicitly in the component's TypeScript code, separate from the template. The template then binds to this model using the formControlName or formGroupName directives. Data flows primarily from the component's model to the view, and user input updates the model directly and synchronously. This clear separation makes the data flow unidirectional and easier to reason about, test, and debug.

<form [formGroup]="userProfileForm">
  <input type="text" formControlName="name">
  <input type="email" formControlName="email">
  <div formGroupName="address">
    <input type="text" formControlName="street">
    <input type="text" formControlName="city">
  </div>
  <button type="submit" [disabled]="!userProfileForm.valid">Submit</button>
</form>