Angular template-driven forms and reactive forms difference

What are the differences between Angular template-driven forms and reactive forms? When to use which approach? What are the pros and cons of each approach?

Template-driven forms

Use template-driven forms when developing static forms. Static means the structure and logic of a form is fix. E.g. the number of form fields does not vary, form validation rules are the same for different user roles, etc.

Examples are login forms, reset password forms, forms to enter and edit address data, order data and similar fix data structures.

In the template-driven approach the form structure and logic is mainly implemented in HTML. Based on this a representation of the form in TypeScript is generated automatically.

Template-driven forms support…

• One-way and two-way data-binding. Forms to enter new data and to edit existing data (from a backend service) can be developed
• Creation of nested form fields, e.g. a form containing a user model consisting of user name, email address and postal address — consisting of street, city, zip code
• Field-spanning validation, e.g. validate entire user model instead of checking each field individually
• Synchronous and asynchronous validation, e.g. check via remote server whether email address exists
• Checking form state, e.g. warn when leaving the form with unsaved changes

Pros

• Form structure and logic is located in one place (HTML)
• New form functionality without / with minimal TypeScript coding
• Makes use of pure web standards, e.g. HTML required attribute for input validation
• Rather easy to understand

Cons

Beyond static form structure and logic template-driven forms provide only limited capabilities to implement dynamic aspects like variable number of fields, repetitive fields, etc.

Reactive-forms

Use the reactive forms approach in case the form shall support dynamic data structures and logic. Examples are dynamic survey forms, forms to add/delete 0..n tags or phone numbers, forms providing different validation for different user roles, etc.

The structure and logic of reactive forms is mainly implemented in TypeScript. Corresponding HTML artifacts only refer to the form controls defined in TypeScript. At highest expansion stage a reactive form can be entirely generated at runtime based on a data structure.

Data binding

The exchange of data from HTML to TypeScript is performed by passing the form’s value property from HTML to TypeScript — not by one/two-way data binding. See saving reactive-forms

Passing data from TypeScript to HTML is done by using the form object’s method setValue() or patchValue() within TypeScript. Both methods support setting the entire data structure of the form object at once as well as setting single form fields.

Pros

• Form definition and logic is mainly implemented in TypeScript. Form fields are created programmatically by using FormGroup or FormBuilder class. HTML form tags only reference TypeScript-based form controls.
• Allows programmatic and full control of form value updates and form validation
• Supports creation of forms with dynamic structure at runtime
• Supports implementation of custom form validation

Cons

• Requires more coding, especially in TypeScript
• Is more difficult to understand and to maintain