Reactive Forms: The Professional Way to Build Forms

Reactive Forms give you full control in TypeScript and are easier to scale and test. ## Step 1: Import ReactiveFormsModule ```ts import { Component } from '@angular/core'; import { ReactiveFormsModule, FormControl, FormGroup, Validators } from '@angular/forms'; @Component({ selector: 'app-signup', standalone: true, imports: [ReactiveFormsModule], templateUrl: './signup.component.html', }) export class SignupComponent { form = new FormGroup({ name: new FormControl('', { nonNullable: true, validators: [Validators.required] }), email: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.email] }), }); submit() { if (this.form.invalid) return; console.log('Form value:', this.form.value); } } ``` ## Step 2: Template ```html <form [formGroup]="form" (ngSubmit)="submit()"> <label>Name</label> <input formControlName="name" /> <div *ngIf="form.controls.name.touched && form.controls.name.invalid"> Name is required. </div> <label>Email</label> <input formControlName="email" /> <div *ngIf="form.controls.email.touched && form.controls.email.invalid"> Enter a valid email. </div> <button type="submit" [disabled]="form.invalid">Create Account</button> </form> ``` ## Why teams love Reactive Forms - validation rules live in TypeScript - easier to reuse patterns across forms - better for complex and dynamic form fields > Next: HTTP POST, sending form data to a backend.