Angular 29 🅰️ Reactive Forms — The Basics - KandZ

Angular has two form systems. Template-driven forms live in the template — directives like ngModel do the work, and the component barely knows a form exists. Reactive forms live in the class — you build a model out of FormControl, FormGroup, and FormArray objects, and the template just wires them up. Reactive forms are more code up front, but they’re typed, testable, synchronous, and predictable. This chapter covers the basics: FormControl, FormGroup, FormBuilder, the directives that connect them to the template, and the patterns that make forms maintainable.

Key point: A reactive form is a model in the class — a tree of FormControl and FormGroup objects that hold the values, validation state, and dirty/touched flags. The template binds to the model with [formGroup] and formControlName. The model is the source of truth; the template reflects it. Nothing about the form exists only in the DOM.

What reactive forms are

A reactive form is a form whose model is built in code.

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

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <input formControlName="email" type="email">
      <input formControlName="password" type="password">
      <button type="submit">Log in</button>
    </form>
  `
})
export class LoginComponent {
  form = new FormGroup({
    email: new FormControl(''),
    password: new FormControl('')
  });

  onSubmit(): void {
    console.log(this.form.value);
    // { email: '...', password: '...' }
  }
}

The form property is a FormGroup with two controls. The template binds to it with [formGroup] and formControlName. Reading this.form.value gives the current values.

What reactive forms give you:

A synchronous model — no waiting for the template to update
Typed values and validators
Testable — construct a FormGroup, call methods, assert the state
Predictable — the model drives the template, not vice versa
Composable — nested groups, arrays, custom controls

What they don’t give you:

Less boilerplate (template-driven wins there)
Automatic two-way binding (you wire it explicitly)
Magic — everything is explicit

Why “reactive”: The form reacts to changes in the model. The model holds observables for value and status changes. Every control is a stream of state.

Why the model matters: The class owns the form. It can read values, set them, validate, reset, mark as touched, and subscribe to changes — all without the DOM. That’s what makes reactive forms testable and predictable.

Why two form systems: Template-driven forms are convenient for simple forms — one [(ngModel)] and you’re done. Reactive forms scale — complex validation, dynamic controls, custom controls, and testing all favor the model-driven approach. Angular ships both because both fit different cases.

`FormControl` — a single field

FormControl is the smallest unit — one input, one value.

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

const email = new FormControl('');

email.value;         // ''
email.valueChanges.subscribe(v => console.log(v));

What a control tracks:

Property	Meaning
`value`	Current value
`valueChanges`	Observable of value changes
`status`	`'VALID'`, `'INVALID'`, `'PENDING'`, `'DISABLED'`
`statusChanges`	Observable of status changes
`valid` / `invalid`	Boolean shortcuts
`pristine` / `dirty`	Touched by user?
`touched` / `untouched`	Blurred at least once?
`errors`	Validation errors or `null`
`pending`	Async validation in progress

Default value:

const name = new FormControl('Alice');
name.value;   // 'Alice'

Typed controls (Angular 14+):

const email = new FormControl<string>('');
const age = new FormControl<number | null>(null);

The type parameter restricts what values are accepted.

With a nonNullable option:

const email = new FormControl('', { nonNullable: true });
// email.value: string, never null

Without it, FormControl can be reset to null. With nonNullable: true, it stays a string.

Reading and writing:

email.setValue('new@example.com');   // sets value
email.value;                          // 'new@example.com'
email.reset();                        // resets to initial value

Watching changes:

email.valueChanges.subscribe(value => {
  console.log('email is now', value);
});

Why FormControl matters: It’s the atom. Every form is a tree of controls. Mastering the control’s properties — value, status, errors, pristine, touched — is mastering reactive forms.

Why typed controls: Angular 14 added generics to FormControl. FormControl<string> guarantees the value is a string. FormControl<number | null> allows null. Types catch mistakes at compile time.

Why nonNullable: By default, a FormControl can be reset to null. If the field should always have a value of the declared type, nonNullable: true keeps it. It’s a small option that prevents null errors downstream.

`FormGroup` — a group of controls

FormGroup groups related controls into one object.

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

const userForm = new FormGroup({
  name: new FormControl(''),
  email: new FormControl(''),
  age: new FormControl<number | null>(null)
});

userForm.value;
// { name: '', email: '', age: null }

A FormGroup value is an object whose keys match the group’s controls.

Nested groups:

const form = new FormGroup({
  user: new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  }),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl('')
  })
});

form.value;
// {
//   user: { name: '', email: '' },
//   address: { street: '', city: '' }
// }

Groups nest, and the value is a nested object.

Reading and writing:

form.setValue({
  user: { name: 'Alice', email: 'a@b.c' },
  address: { street: '1 Main', city: 'Lisbon' }
});

form.patchValue({
  user: { name: 'Bob' }
});

setValue requires all values; patchValue accepts a partial.

The group’s status: A group is invalid if any control is invalid.

form.valid;       // true if all controls are valid
form.invalid;     // true if any is invalid
form.status;      // 'VALID' | 'INVALID' | 'PENDING'

Accessing controls:

form.get('user');              // FormGroup
form.get('user.name');         // FormControl
form.controls.user;            // FormGroup
form.controls.user.controls.name;  // FormControl

Why FormGroup matters: It’s the structure. Forms are trees; FormGroup makes the branches. Its value is an object; its status is the AND of its children’s statuses.

Why nested groups: Real forms have sections — user info, address, payment. Nested groups mirror that structure, and the values reflect it.

Why setValue vs patchValue: setValue enforces that you provide every field — good for full resets. patchValue accepts partial updates — good for updates. The distinction prevents accidental missing fields in setValue and allows flexible updates in patchValue.

`ReactiveFormsModule` — the imports

Reactive forms need ReactiveFormsModule in the component’s imports.

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

@Component({
  standalone: true,
  imports: [ReactiveFormsModule],
  // ...
})

What ReactiveFormsModule provides:

FormControl directive ([formControl])
FormGroup directive ([formGroup])
FormGroupName directive
FormControlName directive
FormArrayName directive
FormBuilder service
Validators and validation infrastructure

Why the module: Unlike template-driven forms, reactive forms don’t need FormsModule. ReactiveFormsModule is the counterpart — it brings the directives that connect form models to templates.

Why standalone imports: Each component imports what it uses. If only some components have forms, only those import ReactiveFormsModule.

Common mistake: Importing FormsModule for reactive forms. That’s the wrong module — it’s for template-driven forms.

Why two modules: Each form system has its own directives and services. Keeping them separate lets you import only what you need. FormsModule for ngModel; ReactiveFormsModule for [formGroup] and friends.

Binding to the template

Reactive form directives connect the model to the template.

[formGroup] on <form>:

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  ...
</form>

formControlName on inputs:

<input formControlName="email" type="email">

formGroupName for nested groups:

<div formGroupName="user">
  <input formControlName="name">
  <input formControlName="email">
</div>

[formControl] for a single control:

<input [formControl]="emailControl" type="email">

For standalone controls not inside a group.

[formArrayName] for arrays:

<div formArrayName="phones">
  <div *ngFor="let phone of phones.controls; let i = index">
    <input [formControlName]="i">
  </div>
</div>

How the binding works:

[formGroup] provides the group to its children
formControlName="x" finds the control named x in the group
Changes in the DOM update the model; changes in the model update the DOM

Why explicit binding: Reactive forms don’t bind with [(ngModel)]. The template binds with [formGroup] and formControlName — directional, not two-way at the directive level. The directives keep the model and the DOM in sync through the form API.

Why “formControlName” not “formControl”: formControlName takes a name — the key in the group. [formControl] takes the control object. Different inputs, different directives.

Why the template is thin: In reactive forms, the template just wires up inputs. All the logic — validation, computed state, submission — is in the class. The template is declarative markup; the class is the form.

`FormBuilder` — the shorthand

FormBuilder reduces boilerplate for building forms.

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

@Component({ /* ... */ })
export class LoginComponent {
  private fb = inject(FormBuilder);

  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]]
  });
}

Each control is an array: [initialValue, validators, asyncValidators].

The full syntax for a control:

this.fb.control(initialValue, validators, asyncValidators, options)

What fb.group accepts:

Form	Meaning
`'name': 'Alice'`	Value only
`'name': ['Alice']`	Value in array
`'name': ['Alice', validators]`	Value + validators
`'name': ['Alice', validators, asyncValidators]`	All three
`'name': new FormControl('Alice')`	Existing control

Nested groups:

form = this.fb.group({
  user: this.fb.group({
    name: [''],
    email: ['']
  }),
  address: this.fb.group({
    street: [''],
    city: ['']
  })
});

Arrays:

form = this.fb.group({
  emails: this.fb.array([
    this.fb.control('')
  ])
});

Why FormBuilder: It’s the shortest way to build a form. The array syntax is compact, and FormBuilder handles the details. It’s the idiomatic choice for any form beyond trivial.

Why inject(FormBuilder): Same as any service. FormBuilder is injectable; inject() gets it.

Why field initializer: form = this.fb.group(...) runs during construction — before ngOnInit. The form exists immediately.

Why fb not formBuilder: Convention. The shorthand fb is standard in Angular code. It’s short and recognizable. The variable name doesn’t matter; the pattern does.

Reading form values

The form’s value is available synchronously.

this.form.value;
// { email: 'a@b.c', password: 'secret123' }

Value vs getRawValue:

Method	Includes disabled controls
`value`	❌
`getRawValue()`	✅

Disabled controls are excluded from value by default. getRawValue() includes them.

Type-safe value (with typed forms):

interface LoginForm {
  email: string;
  password: string;
}

form = this.fb.group({
  email: ['', Validators.required],
  password: ['', Validators.required]
});

Since Angular 14, the type of form.value is inferred from the controls. form.value.email is string.

Watching the value:

this.form.valueChanges.subscribe(value => {
  console.log(value);
});

Watching status:

this.form.statusChanges.subscribe(status => {
  console.log(status);   // 'VALID' | 'INVALID' | 'PENDING'
});

Why synchronous: form.value is immediate. No need to wait for the DOM. That’s why reactive forms are easy to test — construct a form, set values, read the value.

Why getRawValue: Disabled controls are excluded from value to reflect what the user can edit. Sometimes you want the raw values including disabled ones — that’s getRawValue.

Why typed values: The type inference means form.value.email is string, not any. No casts, no as — just autocomplete and checking.

Setting form values

Two methods — setValue and patchValue.

setValue — all values required:

this.form.setValue({
  email: 'a@b.c',
  password: 'secret123'
});

Every field must be provided. Missing or extra keys throw.

patchValue — partial update:

this.form.patchValue({
  email: 'new@example.com'
});

Only the provided fields update.

When to use which:

Method	Use
`setValue`	Full reset or load
`patchValue`	Partial update

reset — back to initial:

this.form.reset();
// All controls back to their initial values

reset with values:

this.form.reset({
  email: 'reset@example.com'
});

Resets the form to the given values — or to initial values if omitted.

Why the distinction: setValue catches missing fields — good for loading. patchValue is flexible — good for updates. The API is designed so the “wrong” one fails loudly.

Why reset: Reset clears values, marks controls pristine and untouched, and clears the submitted state. It’s the full “start over” operation.

Why not just assign to .value: The control’s value setter doesn’t update the form’s tracking — dirty state, validation, etc. setValue and patchValue run through the form machinery, updating everything correctly.

A full example

A login form with validation, submission, and status display.

import { Component, inject } from '@angular/core';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <label>
        Email
        <input formControlName="email" type="email">
        @if (email.invalid && email.touched) {
          <span class="error">
            @if (email.errors?.['required']) { Email is required. }
            @if (email.errors?.['email']) { Invalid email format. }
          </span>
        }
      </label>

      <label>
        Password
        <input formControlName="password" type="password">
        @if (password.invalid && password.touched) {
          <span class="error">
            @if (password.errors?.['required']) { Password is required. }
            @if (password.errors?.['minlength']) {
              Password must be at least 8 characters.
            }
          </span>
        }
      </label>

      <button type="submit" [disabled]="form.invalid">Log in</button>
      <p>Status: {{ form.status }}</p>
    </form>
  `
})
export class LoginComponent {
  private fb = inject(FormBuilder);

  form = this.fb.group({
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]]
  });

  get email() {
    return this.form.controls.email;
  }

  get password() {
    return this.form.controls.password;
  }

  onSubmit(): void {
    if (this.form.invalid) return;

    const { email, password } = this.form.value;
    console.log('Logging in', email, password);
  }
}

What this shows:

FormBuilder builds the form with validation
formControlName wires each input
form.invalid disables the submit button
email.invalid && email.touched shows errors only after interaction
email.errors?.['required'] checks specific errors
Getters expose controls to the template

By the time the user submits, the form is validated and typed.

Why getters: this.form.controls.email is verbose in the template. A getter get email() shortens it to email. The template reads cleanly.

Complete Example Session

# ============================================
# PART 1: BASIC FORMCONTROL
# ============================================

cat > control.ts << 'EOF'
import { FormControl } from '@angular/forms';

const name = new FormControl('Alice');
console.log(name.value);   // 'Alice'

name.setValue('Bob');
console.log(name.value);   // 'Bob'

name.reset();
console.log(name.value);   // 'Alice' (initial)
EOF

npx tsc --noEmit control.ts
# (no errors)

# ============================================
# PART 2: FORMGROUP
# ============================================

cat > group.ts << 'EOF'
import { FormGroup, FormControl } from '@angular/forms';

const form = new FormGroup({
  name: new FormControl(''),
  email: new FormControl('')
});

console.log(form.value);

form.patchValue({ name: 'Alice' });
console.log(form.value);
EOF

npx tsc --noEmit group.ts
# (no errors)

# ============================================
# PART 3: NESTED GROUPS
# ============================================

cat > nested.ts << 'EOF'
import { FormGroup, FormControl } from '@angular/forms';

const form = new FormGroup({
  user: new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  }),
  address: new FormGroup({
    street: new FormControl(''),
    city: new FormControl('')
  })
});

console.log(form.value);

form.get('user.name')?.setValue('Alice');
console.log(form.value);
EOF

npx tsc --noEmit nested.ts
# (no errors)

# ============================================
# PART 4: FORMBUILDER
# ============================================

cat > builder.ts << 'EOF'
import { FormBuilder, Validators } from '@angular/forms';

const fb = new FormBuilder();

const form = fb.group({
  email: ['', [Validators.required, Validators.email]],
  password: ['', [Validators.required, Validators.minLength(8)]]
});

console.log(form.value);
console.log(form.valid);

form.patchValue({
  email: 'a@b.c',
  password: 'secret123'
});
console.log(form.valid);
EOF

npx tsc --noEmit builder.ts
# (no errors)

# ============================================
# PART 5: READING AND SETTING
# ============================================

cat > read-set.ts << 'EOF'
import { FormBuilder } from '@angular/forms';

const fb = new FormBuilder();
const form = fb.group({
  name: [''],
  email: ['']
});

console.log(form.value);       // both empty

form.setValue({ name: 'Alice', email: 'a@b.c' });
console.log(form.value);

form.patchValue({ name: 'Bob' });
console.log(form.value);
EOF

npx tsc --noEmit read-set.ts
# (no errors)

# ============================================
# PART 6: TYPED CONTROLS
# ============================================

cat > typed.ts << 'EOF'
import { FormControl } from '@angular/forms';

const email = new FormControl<string>('', { nonNullable: true });
email.setValue('a@b.c');
console.log(email.value.toUpperCase());

const age = new FormControl<number | null>(null);
age.setValue(30);
console.log(age.value);
EOF

npx tsc --noEmit typed.ts
# (no errors)

# ============================================
# PART 7: WATCHING CHANGES
# ============================================

cat > changes.ts << 'EOF'
import { FormControl } from '@angular/forms';

const email = new FormControl('');
email.valueChanges.subscribe(v => console.log('value', v));
email.statusChanges.subscribe(s => console.log('status', s));

email.setValue('a@b.c');
console.log('dirty:', email.dirty);
console.log('touched:', email.touched);
EOF

npx tsc --noEmit changes.ts
# (no errors)

# ============================================
# PART 8: RUN AND OBSERVE
# ============================================

npx tsc control.ts group.ts nested.ts builder.ts read-set.ts typed.ts changes.ts
node control.js
# [ Alice ]
# [ Bob ]
# [ Alice ]

node group.js
# [ { name: '', email: '' } ]
# [ { name: 'Alice', email: '' } ]

node nested.js
# [ { user: { name: '', email: '' }, address: { street: '', city: '' } } ]
# [ { user: { name: 'Alice', email: '' }, address: { street: '', city: '' } } ]

node builder.js
# [ { email: '', password: '' } ]
# [ false ]
# [ true ]

node read-set.js
# [ { name: '', email: '' } ]
# [ { name: 'Alice', email: 'a@b.c' } ]
# [ { name: 'Bob', email: 'a@b.c' } ]

node typed.js
# [ A@B.C ]
# [ 30 ]

node changes.js
# [ value  ]
# [ status VALID ]
# [ value a@b.c ]
# [ status VALID ]
# [ dirty: true ]
# [ touched: false ]

Quick Reference

The Three Building Blocks

Class	Purpose
`FormControl`	Single value
`FormGroup`	Object of controls
`FormArray`	Array of controls

Import

Need	Import
Reactive directives	`ReactiveFormsModule`
Classes	`@angular/forms`
Validators	`@angular/forms`

Template Directives

Directive	Applied to
`[formGroup]`	`<form>` or `<div>`
`formControlName="x"`	`<input>`
`[formControl]="ctrl"`	`<input>`
`formGroupName="x"`	Nested group
`formArrayName="x"`	Array

`FormControl` Properties

Property	Meaning
`value`	Current value
`valueChanges`	Observable
`status`	VALID / INVALID / PENDING / DISABLED
`statusChanges`	Observable
`valid` / `invalid`	Booleans
`pristine` / `dirty`	User-modified?
`touched` / `untouched`	Blurred?
`errors`	Error object or null
`pending`	Async validation in progress

`FormGroup` Methods

Method	Purpose
`value`	Group value
`getRawValue()`	Include disabled
`setValue(obj)`	All values
`patchValue(obj)`	Partial update
`reset(value?)`	Reset form
`get(path)`	Access a control
`addControl` / `removeControl`	Dynamic controls

`FormBuilder` Syntax

Form	Meaning
`fb.control(v)`	Single control
`fb.group({...})`	Group
`fb.array([...])`	Array
`[v]`	Value
`[v, validators]`	Value + sync validators
`[v, validators, asyncValidators]`	All

Value vs Raw Value

Method	Disabled controls
`value`	Excluded
`getRawValue()`	Included

Setting Values

Method	Requirement
`setValue`	All keys required
`patchValue`	Partial allowed

Typed Controls

Form	Type
`FormControl<string>`	`string \| null`
`new FormControl('', { nonNullable: true })`	`string`
`FormControl<number \| null>`	`number \| null`

Common Validators

Validator	Meaning
`Validators.required`	Non-empty
`Validators.email`	Email format
`Validators.minLength(n)`	Min chars
`Validators.maxLength(n)`	Max chars
`Validators.pattern(re)`	Regex match
`Validators.min(n)`	Min number
`Validators.max(n)`	Max number

Reading Form State

Expression	Meaning
`form.valid`	All controls valid
`form.value`	All values
`form.status`	VALID/INVALID/PENDING
`form.dirty`	User changed something
`form.touched`	At least one blur
`control.errors?.['key']`	Specific error

Error Cases

Error	Cause
`Cannot find control`	`formControlName` mismatch
`Must supply a value for form control`	`setValue` missing key
`formGroup expects a FormGroup`	Wrong binding
`No value accessor`	Missing module

Signal Forms (Newer)

Angular is introducing a signal-based form system. The class form remains for now; signal forms will coexist. This chapter covers the class-based reactive forms.

Testing

const form = new FormGroup({
  email: new FormControl('', Validators.required)
});

form.setValue({ email: '' });
expect(form.valid).toBe(false);

form.setValue({ email: 'a@b.c' });
expect(form.valid).toBe(true);

No DOM, no TestBed. Construct the form and assert.

Best Practices

✅ Do This:

// Use FormBuilder for real forms
private fb = inject(FormBuilder);
form = this.fb.group({
  email: ['', [Validators.required, Validators.email]]
});                                                            // ✅

// Use typed controls
const email = new FormControl<string>('', { nonNullable: true }); // ✅

// Use getters for template access
get email() { return this.form.controls.email; }               // ✅

// Disable submit when invalid
<button [disabled]="form.invalid">Submit</button>              // ✅

// Show errors after interaction
@if (email.invalid && email.touched) { }                       // ✅

// Use patchValue for partial updates
form.patchValue({ name: 'Alice' });                            // ✅

// Use setValue for full load
form.setValue({ name: 'A', email: 'b' });                      // ✅

// Subscribe to valueChanges for reactive behavior
form.valueChanges.subscribe(v => this.onChange(v));            // ✅

// Test forms without TestBed
const form = new FormGroup({}); expect(form.valid).toBe(true); // ✅

// Import ReactiveFormsModule in the component
imports: [ReactiveFormsModule]                                 // ✅

❌ Don’t Do This:

// Don't use ngModel with reactive forms
<input [(ngModel)]="name" formControlName="name">              // ❌

// Don't import FormsModule for reactive forms
imports: [FormsModule]                                         // ⚠️

// Don't forget formControlName
<input type="email">  // ⚠️  not connected to the form           // ⚠️

// Don't assign to control.value directly
email.value = 'x';  // ⚠️  use setValue                         // ⚠️

// Don't use patchValue for full loads
form.patchValue(fullData);  // ⚠️  may miss fields              // ⚠️

// Don't forget the module
@Component({ imports: [] })  // ⚠️  formControlName not found    // ⚠️

// Don't read .value to check user input
// Subscribe to valueChanges or read after change detection    // ⚠️

// Don't skip validation
new FormControl('')  // ⚠️  no validators                        // ⚠️

// Don't put form logic in the template
@if (form.controls.email.errors?.['required'] && form.dirty) { } // ⚠️

Common Pitfalls

Pitfall	Problem	Solution
Missing `ReactiveFormsModule`	Directives not found	Import in component
`formControlName` mismatch	Control not found	Match the name
`setValue` missing key	Compile error	Use `patchValue`
Wrong module	`FormsModule` imported	Use `ReactiveFormsModule`
Value assignment	Doesn’t update state	Use `setValue`
Forgot getter	Verbose template	Add getters
Errors shown immediately	Bad UX	Guard with `touched`
Untyped control	`any` values	Use generics
Disabled excluded	Missing values	Use `getRawValue()`
Not testing	Silent bugs	Unit test forms

Real-World Examples

1. Single control

const email = new FormControl('');

2. Typed control

const email = new FormControl<string>('', { nonNullable: true });

3. Basic group

const form = new FormGroup({
  name: new FormControl(''),
  email: new FormControl('')
});

4. Nested group

const form = new FormGroup({
  user: new FormGroup({
    name: new FormControl('')
  })
});

5. FormBuilder group

form = this.fb.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]]
});

6. With validators

password: ['', [Validators.required, Validators.minLength(8)]]

7. Template binding

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <input formControlName="email">
</form>

8. Nested template

<div formGroupName="user">
  <input formControlName="name">
</div>

9. Read value

this.form.value.email;

10. Patch value

this.form.patchValue({ email: 'a@b.c' });

11. Set value

this.form.setValue({ email: 'a@b.c', password: 'secret' });

12. Reset

this.form.reset();

13. Disable submit

<button [disabled]="form.invalid">Submit</button>

14. Show errors conditionally

@if (email.invalid && email.touched) {
  <span>Error</span>
}

15. Subscribe to changes

this.form.valueChanges.subscribe(v => console.log(v));

16. Getter for control

get email() { return this.form.controls.email; }

17. Validate on submit

onSubmit(): void {
  if (this.form.invalid) return;
  // submit
}

18. Access specific control

this.form.get('user.email');

19. Typed value

const { email, password } = this.form.value;
// email: string, password: string

20. Test a form

const form = new FormGroup({ email: new FormControl('') });
form.setValue({ email: 'a@b.c' });
expect(form.valid).toBe(true);

Visual: Reactive Form Model

┌──────────────────────────────────────────────┐
│  FormGroup (form)                            │
│  ┌────────────────────────────────────────┐  │
│  │  FormControl: email                    │  │
│  │  FormControl: password                 │  │
│  │  FormGroup: address                    │  │
│  │  ┌──────────────────────────────────┐  │  │
│  │  │  FormControl: street             │  │  │
│  │  │  FormControl: city               │  │  │
│  │  └──────────────────────────────────┘  │  │
│  └────────────────────────────────────────┘  │
│                                              │
└──────────────────────────────────────────────┘

Visual: Template → Model Binding

┌──────────────────────────────────────────────┐
│  Template                                    │
│                                              │
│  <form [formGroup]="form">                   │
│    <input formControlName="email">           │
│  </form>                                     │
│                                              │
└──────────────────────────────────────────────┘
                  │
                  │  directives connect
                  ▼
┌──────────────────────────────────────────────┐
│  Model                                       │
│                                              │
│  form = fb.group({                           ││    email: ['']                               │
│  });                                         │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  DOM change → model update                   │
│  Model change → DOM update                   │
│                                              │
└──────────────────────────────────────────────┘

Visual: Value vs Status

┌──────────────────────────────────────────────┐
│  form.value                                  │
│  {                                           │
│    email: 'a@b.c',                           │
│    password: 'secret'                        │
│  }                                           │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  form.status                                 │
│  'VALID'                                     │
│                                              │
│  form.valid   → true                         │
│  form.invalid → false                        │
│  form.dirty   → true                         │
│  form.touched → true                         │
│                                              │
└──────────────────────────────────────────────┘

Visual: Control State

┌──────────────────────────────────────────────┐
│  Initial:                                    │
│  value: ''                                   │
│  pristine: true                              │
│  untouched: true                             │
│  valid: true                                 │
│                                              │
└──────────────────────────────────────────────┘
                  │
                  │  user types
                  ▼
┌──────────────────────────────────────────────┐
│  value: 'x'                                  │
│  pristine: false  ← dirty                    │
│  untouched: true                             │
│                                              │
└──────────────────────────────────────────────┘
                  │
                  │  user blurs
                  ▼
┌──────────────────────────────────────────────┐
│  value: 'x'                                  │
│  dirty: true                                 │
│  touched: true  ← blurred                    │
│                                              │
└──────────────────────────────────────────────┘

Visual: `setValue` vs `patchValue`

┌──────────────────────────────────────────────┐
│  Form:                                       │
│  { name: '', email: '' }                     │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  setValue({ name: 'Alice', email: 'a@b.c' }) │
│  ✅ all fields provided                      │
│                                              │
│  setValue({ name: 'Alice' })                 │
│  ❌ missing email                            │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  patchValue({ name: 'Alice' })               │
│  ✅ partial update                           │
│                                              │
└──────────────────────────────────────────────┘

Visual: FormBuilder Array Syntax

┌──────────────────────────────────────────────┐
│  fb.group({                                  │
│    email: ['', [Validators.required]],       │
│    //       ↑       ↑                        │
│    //     value  sync validators             │
│    //                                        │
│    password: ['', Validators.required]       │
│    //          ↑         ↑                   │
│    //       initial  validators              │
│  })                                          │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  Full form:                                  │
│                                              │
│  fb.control(                                 │
│    initialValue,                             │
│    syncValidators,                           │
│    asyncValidators,                          │
│    options                                   │
│  )                                           │
│                                              │
└──────────────────────────────────────────────┘

Visual: Typed Controls

┌──────────────────────────────────────────────┐
│  Without type parameter:                     │
│                                              │
│  const email = new FormControl('');          │
│  // value: string | null                     │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  With type parameter:                        │
│                                              │
│  const email = new FormControl<string>('');  │
│  // value: string | null                     │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  With nonNullable:                           │
│                                              │
│  const email = new FormControl('', {         │
│    nonNullable: true                         │
│  });                                         │
│  // value: string  ← never null              │
│                                              │
└──────────────────────────────────────────────┘

Visual: Form State Flow

┌──────────────────────────────────────────────┐
│  Created                                     │
│  pristine, untouched                         │
│       │                                      │
│       ▼                                      │
│  User edits                                  │
│  dirty, untouched                            │
│       │                                      │
│       ▼                                      │
│  User blurs                                  │
│  dirty, touched                              │
│       │                                      │
│       ▼                                      │
│  Submit or reset                             │
│  back to initial                             │
│                                              │
└──────────────────────────────────────────────┘

Visual: Decision Flow

┌──────────────────────────────────────────────┐
│  Building a form?                            │
│       │                                      │
│       ├── Simple, few fields ──► template-driven│
│       │                                      │
│       └── Complex, validation, dynamic ──► reactive│
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  Building a form model?                      │
│       │                                      │
│       ├── One field ──► FormControl          │
│       │                                      │
│       ├── Related fields ──► FormGroup       │
│       │                                      │
│       └── Repeatable fields ──► FormArray    │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  Boilerplate-heavy?                          │
│       │                                      │
│       └── Use FormBuilder                    │
│                                              │
└──────────────────────────────────────────────┘

┌──────────────────────────────────────────────┐
│  Loading data?                               │
│       │                                      │
│       ├── Full object ──► setValue           │
│       │                                      │
│       └── Partial update ──► patchValue      │
│                                              │
└──────────────────────────────────────────────┘

Summary

Concept	Meaning
Reactive forms	Form model in the class
`FormControl`	Single field
`FormGroup`	Group of controls
`FormArray`	Array of controls
`FormBuilder`	Shorthand builder
`ReactiveFormsModule`	Directives
`[formGroup]`	Bind group to template
`formControlName`	Bind control to input
`setValue`	Set all values
`patchValue`	Set partial values
`reset`	Back to initial
Validators	Sync and async rules

Key takeaways:

Reactive forms are built in the class — FormControl, FormGroup, FormArray
FormControl is one field with value, status, validators, and change streams
FormGroup is a group of controls whose value is an object
Groups nest — the value is a nested object
FormBuilder is the shorthand — array syntax for value + validators
ReactiveFormsModule provides the directives — import it in the component
[formGroup] binds a form to a group; formControlName binds an input to a control
form.value is synchronous and, since Angular 14, typed
setValue requires all fields; patchValue accepts partial
reset returns the form to initial values
Validators are functions — required, email, minLength, and more
Form state — valid, dirty, touched, pristine — drives the template
Errors are shown conditionally, usually after touched
Test by constructing the form directly — no TestBed needed for the logic
Reactive forms scale to complex cases — dynamic controls, custom controls, cross-field validation

Remember: A reactive form is a model — a tree of controls that holds values, validation state, and change streams. The template binds to the model with [formGroup] and formControlName. Everything happens in the class. That’s why reactive forms are typed, testable, and predictable. Use FormBuilder to reduce boilerplate, getters to shorten the template, and patchValue for updates. Show errors after touched. Disable the submit button when invalid. The rest — validation, submission, dynamic controls — builds on this foundation.

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!