Angular 2+ Reactive Form - Complicated Problems Series

May 12, 2018

“Why’d you have to go and make things so complicated?” - Avril Lavigne, implementing Angular 2 forms in 2018

Avril Lavigne

We’ve had typeaheads for a while now, thanks Twitter. So it shouldn’t be so damn hard to implement one(or any custom UI element we’ve been using for the past few years) in Angular 2, especially when using Reactive Forms.

Quick overview: Reactive Forms.

Reactive forms allows us to write more explicitly controlled forms by creating a group of FormControls and binding them to the DOM. I prefer this approach as it allows more control and in my opinion, cleaner validation implementation, especially when it comes to implementing messier requirement rules that we may need. Most of our control will be inside our component instead of our html code.

In this series we’ll work through the following “complicated” problems. Possibly while listening to Avril’s newest single, Head Above Water.

Demo code available at