Angular 2+ Reactive Form - Complicated Problems Series
Blog post series on how to use Angular Reactive Forms.
May 12, 2018
“Why’d you have to go and make things so complicated?” - Avril Lavigne, implementing Angular 2 forms in 2018
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.
- Problem 1: I need dynamic required fields
- Problem 2: I need custom validation rules
- Problem 3: I need to display one thing in an input field for the user but submit something else
- Problem 4: I have a bunch of checkboxes and need to submit an array
- Problem 5: I need to dynamically create and remove form controls & form groups
Demo code available at https://github.com/tehfedaykin/complicated-forms-app