ngModel

ngModel is the building block that we will use to implement validation. It does two things for us: it maintains the model state and provides a mechanism for identifying validation errors and displaying validation messages.

To get started, we need to assign ngModel to a local variable in all of our form controls that we will be validating. In each case, we need to use a unique name for this local variable. For example, for workout name we add #name="ngModel" within the input tag for that control along with the HTML 5 required attribute. The workout name input tag should now look like this:

<input type="text" name="workoutName" #name="ngModel" class="form-control" id="workout-name" placeholder="Enter workout name. Must be unique." [(ngModel)]="workout.name" required> 

Continue through the form, assigning ngModel to local variables for each of the inputs. Also, add the required attribute for all the required fields.