Using NgForm

In our template (workout.component.html), we have added the following form tag:

<form #f="ngForm" class="row" name="formWorkout" (ngSubmit)="save(f.form)">. . . 
</form> 

Let's take a look at what we have here. One interesting thing is that we are still using a standard <form> tag and not a special Angular tag. We've also used # to define a local variable f to which we have assigned ngForm. Creating this local variable provides us with the convenience of being able to use it for form-related activity in other places within the form. For example, you can see that we are using it at the end of the opening form tag in a parameter, f.form, which is being passed to the onSubmit event bound to (ngSubmit).

That last binding to (ngSubmit) should tell us that something different is going on here. Even though we did not explicitly add the NgForm directive, our <form> now has additional events such as ngSubmit to which we can bind actions. How did this happen? Well, this was not triggered by our assigning ngForm to a local variable. Instead, it happened automagically because we imported the forms module into workout-builder.module.ts.

With that import in place, Angular scanned our template for a <form> tag and wrapped that <form> tag within an NgForm directive. The Angular documentation indicates that <form> elements in the component will be upgraded to use the Angular form system. This is important because it means that various capabilities of  NgForm are now available to use with the form. These include the ngSubmit event, which signals when a user has triggered a form submission and provides the ability to validate the entire form before submitting it.