What are the practical differences between templat

问题:

I have been reading about Angular2 new Forms API and it seems that there are two approaches on forms, one is Template driven forms other is reactive or model-driven forms.

I would like to know the practical difference between the two, not the difference in syntax (obviously) but practical uses and which approach benefits more in different scenarios. Also, is there a performance gain in choosing one over the other? And if yes, why?

回答1:

Template Driven Forms Features

• Easy to use
• Suitable for simple scenarios and fails for complex scenarios
• Similar to AngularJS
• Two way data binding(using [(NgModel)] syntax)
• Minimal component code
• Automatic track of the form and its data(handled by Angular)
• Unit testing is another challenge

Reactive Forms Features

• More flexible, but needs a lot of practice
• Handles any complex scenarios
• No data binding is done (immutable data model preferred by most developers)
• More component code and less HTML markup
• Reactive transformations can be made possible such as
  • Handling a event based on a debounce time
  • Handling events when the components are distinct until changed
  • Adding elements dynamically
• Easier unit testing

回答2:

I think that it´s a discussion about code, strategy and user experience.

In summary we change for template-driven approach which is more easy to work with it, to reactive (in model-driven approach) for giving us more control, that results in a better testable form by leveraging a decoupling between the HTML (design/CSS team can work here) and component's business rules (angular/js specialist members) and to improve the user experience with features like reactive transformations, correlated validations and handle complex scenarios as runtime validation rules and dynamic fields duplication.

This article is a good reference about it: Angular 2 Forms - Template Driven and Model Driven Approaches

回答3:

Here is the summary of comparision between template driven and reactive forms explained by DeborahK (Deborah Kurata) well,