angular2/4. What for should I use Reactive Forms when there is built in FormsModule?

Question

Can anyone please explain why I need to use them?

In which cases Reactive Forms make my life simpler and better in comparison with FormsModule?

Answer 1

Basically, the FormsModule is sufficient if you have very simple requirements. My first forms were all FormsModule. They're great if you just need to bind form inputs to model properties.

ReactiveFormsModule are a bigger pain to setup the first time you do it, but they give you much more control. Because you create the form elements in your components, you can easily do things such as:

• read/write the value of the input at any point (even before the view is built)
• Define advanced validation rules, including async validators (eg: check with the server whether the username entered is available while the user is filling out the rest of a registration form)
• Be notified and react immediately when the value change
• Access the native HTML form element
• Reset the form...
• If you care about unit tests (good coders should), reactive forms are significantly easier to test because they can be manipulated imperatively. With FormsModule, just getting a reference to the form instance in your unit test is a pain.

Since I made the switch, I haven't gone back to FormsModule. See the docs

Angular reactive forms facilitate a reactive style of programming that favors explicit management of the data flowing between a non-UI data model (typically retrieved from a server) and a UI-oriented form model that retains the states and values of the HTML controls on screen. Reactive forms offer the ease of using reactive patterns, testing, and validation.

With reactive forms, you create a tree of Angular form control objects in the component class and bind them to native form control elements in the component template, using techniques described in this guide.

You create and manipulate form control objects directly in the component class. As the component class has immediate access to both the data model and the form control structure, you can push data model values into the form controls and pull user-changed values back out. The component can observe changes in form control state and react to those changes.