What is the difference between template-driven and reactive forms in Angular?

Both produce the same result; they differ in where the source of truth lives.

Template-driven forms are built in the template with ngModel. Angular creates the form model implicitly from the directives it finds. They are quick for a login box, but the model is asynchronous to access and hard to test without rendering.

Reactive forms are built in the class:

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

and bound with [formGroup] and formControlName.

Why reactive is the default recommendation:

• The model is explicit and synchronously available, so it is unit-testable without a DOM.
• Validation is composed in code, and custom and asynchronous validators are straightforward.
• valueChanges is an observable, so debouncing, dependent fields, and conditional validation are natural.
• Dynamic forms — adding and removing controls at runtime with FormArray — are practical rather than awkward.

Note: Mention typed reactive forms, introduced in Angular 14. They removed the long-standing complaint that form values were typed as any.