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.

Related Post

Free Better Battery Stats and Time Remaining for M... Better Battery Stats and Time Remaining for Mac OS TL;DR; Do you miss the time remaining indicator on your MacBook, MacBook Air, or MacBook Pro? He...
Right-Click to Translate (Look Up) with Google Tra... If you are not native english speaker, you may be frustrated with default "look up" options you get after selecting a text and right clicking. There a...
Translate Selected Text to English on Right Click ... TL;DR; Need instant translation right in context menu? You can accomplish it for free with one line of code in Automator, or you can proc...
MacBook wifi issue – OS X keeps reconnecting Last few weeks I was facing annoying wifi problems. My mac was reconnecting every 5 minutes. On top of that BSSID was reseting so I saw BSSID changing...
Right Click to Create New File on Mac OS X TL;DR; Windows has a lot of cons but it has also some pros. One of them is a smooth way to create empty file on right-click. Mac OS doesn't come with...
PPTP VPN on MAC OS X Sierra, High Sierra and Mojav... PPTP VPN for Mac OS X Introduction PPTP VPN is no longer supported on macOS Sierra and High Sierra and that is just fine, because there are some se...
Buy me a coffeeOut of coffee 😱, please help!