What are the benefits of Reactive Form over Template-Driven Form?

Question

Answers to other similar questions are talking about form scalability and unit testing.

Could you please give some examples of large scaled form that cannot be made by [(ngModel)] with *ngIf and *ngFor?

About the unit testing, Angular official documentation gives samples of view-to-model and model-to-view testing cases. There ARE differences between two approaches.

But aren't those tests responsibility of @angular/forms? Why should we do such tests in our own component? Shouldn't we trust Angular while using its official mature stable modules?

So please give evidences that Reactive Forms are really better than Template-Driven Forms, not just saying so.

Can you please state a case where reactive cover a scenario that can't be accomplished with template driven forms?

Can you please give a unit test example that is not the case and responsibility of Value Accessor?

Angular as an MVVM FE framework, you have a View(HTML template), you have a Model(JavaScript object represents the form), and you have a View-Model(two-way binding of [(ngModel)] and other directives beneath). Then there're the FormGroups, FormControls and FormArrays that managed to fulfill the same scalability as of JavaScript object?

TypeScript is already typed, now the typed forms?

<input [(ngModel)]="loginForm.email">
<input [(ngModel)]="loginForm.password">

export interface LoginForm {
  email: string;
  password: string;
}

export class MyComponent {

  loginForm: LoginForm = {
    email: '',
    password: '',
  }

  // ...
}

Or double the complexity by a nullable const email = new FormControl<string|null>('angularrox@gmail.com'); because its value will be null when you call reset email.reset().

... option affects the runtime behavior of your form when .reset() is called, and should be flipped with care ...

https://angular.io/guide/typed-forms#nullability

That'll just add burden to the developers.

I don't want to be rude, but I think this might answer your questions - https://stackoverflow.com/questions/39142616/what-are-the-practical-differences-between-template-driven-and-reactive-forms — dominikbaranapp, Aug 26 '22 at 13:43
Does this answer your question? [What are the practical differences between template-driven and reactive forms?](https://stackoverflow.com/questions/39142616/what-are-the-practical-differences-between-template-driven-and-reactive-forms) — jonrsharpe, Aug 26 '22 at 13:46
Hi @dominikbaranapp, thanks. I have read the question and the answers before I ask the question. But I still have the same concern as one of the comment by jtate. `what exactly does "Handles any complex scenarios" mean when referring to reactive forms? coming from AngularJS, I've built complex forms just fine, so it's hard for me to see how template driven forms "fail for complex scenarios"` To me, the added complexity isn't paid by the benefits of reactive form. Or perhaps, I have never met and imagined how complex a form could be. Thanks for the comment. — KingMario, Aug 26 '22 at 13:50
BTW, I prefer ReactJS's everything JavaScript philosophy and Vue.js's data-driven thinking. 大道至简 — KingMario, Aug 26 '22 at 16:03

score 0 · Accepted Answer · answered Aug 26 '22 at 13:46

From the documentation https://angular.io/guide/forms-overview#choosing-an-approach

And here are key differences https://angular.io/guide/forms-overview#key-differences

For complex projects i would recommend Reactive Forms with logic concentrated in components and not in html and so much flexibility for dynamic forms and any custom request.

What are the benefits of Reactive Form over Template-Driven Form?

1 Answers1