Getting started with reactive forms

We'll make use of reactive forms to build the form to add and edit Exercises. Among other things, this form will allow the user to add links to exercise videos on YouTube. And since they can add any number of video links, we will need to be able to add controls for these video links dynamically. This challenge will present a good test of how effective reactive forms can be in developing more complex forms.

Here is how the form will look:

To get started, open workout-builder.module.ts and add the following import:

import { FormsModule, ReactiveFormsModule }   from '@angular/forms'; 
 ... 
@NgModule({ 
    imports: [ 
        CommonModule, 
        FormsModule, 
        ReactiveFormsModule, 
        SharedModule, 
        workoutBuilderRouting 
    ],

ReactiveFormsModule contains what we will need to build reactive forms.

Next, copy exercise-builder-service.ts from the workout-builder/builder-services folder under trainer/src/app in checkpoint 4.6 and import it into workout-builder.module.ts:

import { ExerciseBuilderService } from "./builder-services/exercise-builder-service"; 

Then, add it as an additional provider to the providers array in that same file:

@NgModule({ 
   . . . 
  providers: [
    WorkoutBuilderService,
    WorkoutResolver,
    ExerciseBuilderService,
    ExerciseResolver
   ]
}) 

Now, open exercise.component.ts and add the following import statement:

import { Validators, FormArray, FormGroup, FormControl, FormBuilder } from '@angular/forms';

This brings in the following, which we will use to construct our form:

• FormBuilder
• FormGroup
• FormControl
• FormArray

Finally, we inject FormBuilder (as well as Router, ActivatedRoute, and ExerciseBuilderService) into the constructor of our class:

  constructor(
      public route: ActivatedRoute,
      public router: Router,
      public exerciseBuilderService: ExerciseBuilderService,
      public formBuilder: FormBuilder
  ) {}

With these preliminary steps out of the way, we can now go ahead and start building out our form.