Angular Reactive Forms (minimal example)

Reactive or not reactive that is the question. 

Angular offers two form-building technologies: reactive forms and template-driven forms. One advantage of Angular reactive forms is that value and validity updates are always synchronous and under your control. You don’t need to bother with the timing issues that sometimes plague a template-driven form. Moreover reactive forms can be easier to unit test.

Neither is “better”. They’re two different architectural paradigms, with their own strengths and weaknesses. Choose the approach that works best for you. You may decide to use both in the same application.

Reactive forms have lots of features to learn an documentation can be often overwhelming so here is minimal example how to use them:

Lets start with hero-detail.component.ts, all the magic happens in createForm() method:

Then we have here hero-detail.component.html with our form and all the validation warnings hidden divs:

And that’s pretty all. Last thing is not to forgot import ReactiveFormsModule in app.module.ts:

All examples are taken from official Angular documentation and are condensated to create minimal example.