What is Angular Forms — Template-driven vs Reactive?

Angular provides two approaches to building forms: Template-driven forms: form logic lives in the HTML template using directives. Angular creates the form model automatically from the template. Simpler, less code. Requires FormsModule. Uses: ngModel, ngForm, ngModelGroup. Example: <form (ngSubmit)="onSubmit(form)" #form="ngForm"> <input name="email" ngModel required email> <span *ngIf="form.controls.email?.invalid">Invalid</span> </form>. Pros: easy to understand, minimal code for simple forms. Cons: harder to test (template-based), less control over validation, not suitable for complex dynamic forms. Reactive forms: form model is defined explicitly in the TypeScript class using FormGroup, FormControl, FormBuilder, and FormArray. Template is bound to the model. Requires ReactiveFormsModule. Example: form = this.fb.group({ email: ["", [Validators.required, Validators.email]], password: ["", Validators.minLength(8)] }); // Template: <form [formGroup]="form" (ngSubmit)="onSubmit()"> <input formControlName="email"> <span *ngIf="form.get("email").hasError("email")">Invalid email</span></form>. Pros: explicit control, easier unit testing, dynamic forms support (FormArray), better validation management, reactive with value changes Observable. Cons: more verbose. When to use: template-driven for simple forms; reactive for complex, dynamic forms requiring unit testing.