exercise-5_refactor-to-reactive-forms.md

Exercise: Refactor to model-driven forms

Template-driven forms are nice and get us going very quickly. However, they are hard to test without e2e tests. In this exercise we're going to refactor our existing form to a model-driven form using FormControl, FormGroup and FormBuilder APIs.

Tasks

1. Add ReactiveFormsModule to our application module's imports
2. Export validateEmail() from src/app/email-validator.ts
3. Export checkEmailAvailability(contactsService) from src/app/email-availability-validator.ts
4. Import FormControl, FormGroup, FormBuilder and Validators from @angular/forms in ContactsCreatorComponent
5. Import checkEmailAvailability and validateEmail functions in ContactsCreatorComponent
6. Inject FormBuilder into ContactsCreatorComponent
7. Create a FormGroup using FormBuilder for all fields in the form and assign it to a form property on the component
8. Apply validators to form fields imperatively
9. Use [formGroup] to associate form with the DOM and remove #form="ngForm"
10. Use formControlName to associate single form controls to the input DOM elements
11. Use form.get('FIELDNAME') APIs to access validity state of fields and display error messages
12. Remove all validation directives from input fields in the template

Bonus Tasks

1. Try to apply reactive form APIs to ContactsEditorComponent as well