Introducing the FormBuilder

Now that our CityEditComponent has been set up, we might be tempted to reuse the same techniques to create a CountryEditComponent and get the job done, just like we did in Chapter 6, Fetching and Displaying Data with our CitiesComponent and CountryComponent files. However, we won’t be doing this. Instead, we’ll take the chance to introduce a new tool to our shed that can be very useful when dealing with multiple forms: the FormBuilder service.

In the following sections, we’ll do the following:

• Create our CountryEditComponent with all the required TypeScript, HTML, and SCSS files
• Learn how to use the FormBuilder service to generate form controls in a better way
• Add a new set of Validators (including a brand-new isDupeCountry custom validator) to the new form implementation
• Test our new FormBuilder-based implementation to check that everything works

By the end of this section, we’ll have...