Forms are pretty much always harder than they look. Especially in today’s complex web experience. There are several different types of forms with lots of interaction that takes place behind the scenes. User logins, shopping carts, and social media profiles just to name a few. I wanted to demonstrate how to achieve a specific scenario that might not be as straight forward with Angular forms. Using child components.
There are two types of forms in Angular. Template-driven and Model-driven aka “reactive” forms. Template-driven forms are more basic and feel like a carry over from the Angular JS days. Reactive forms are the more modern way to handle things. They allow you to create a model of your form data in the component and then tie it to the template. This article assumes that you’re already familiar with building forms with Angular. When utilizing child components in forms the workflow usually goes something like this:
1: Import the ReactiveFormsModule in your app.module.ts
2: Create a new FormGroup in your parent component
*Notice that we are also creating a subscriber to listen to changes on the form. This is used in this example…
