All 5 Forms questions
More in Forms
How do you prevent a form from reloading the page when it is submitted in Angular? How do you add validation to a reactive form field, and how do you show an error message to the user? How would you build a dynamic form with a variable number of fields, such as a list of phone numbers, using reactive forms? How would you create a custom asynchronous validator that checks something against a server, such as whether a username is already taken?
Advertisement
Angular › Forms

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

Beginner

Answer

Template driven forms build the form structure mostly in the HTML template, using ngModel for two way binding and letting Angular create the form control objects behind the scenes automatically. Reactive forms build the form structure explicitly in the TypeScript class using FormGroup and FormControl objects, giving you more direct control and making complex validation and dynamic forms easier to manage.
// Template driven
<input name="email" ngModel required />

// Reactive
form = new FormGroup({
  email: new FormControl('', Validators.required)
});
<input [formControl]="form.controls.email" />
Real-world example A simple contact form with just a couple of fields uses the template driven approach for quick setup, while a complex multi step signup form uses reactive forms for its more predictable, explicit control over validation.

Common follow-ups: Which approach does the Angular team generally recommend for larger, more complex forms?;Can you mix template driven and reactive forms in the same app?

Data Binding;Angular Style Guide & Best Practices
All 5 Forms questions