Forms with NgModel

Understanding what happens behind the scenes when we use ngModel will helps us grasp the concept of template-driven forms. When an ngModel directive is placed on an element of the form, such as a text input, Angular creates a form control for us.

NgModel facilitates two-way data binding, which is very useful for reading and writing data to a model that is linked with the form. We saw an example of this in our user form when we took the email and phone inputs. The template-driven form uses an ngForm instance, which we can reference to get the form details; let's look at its internals. If you print the passed form, the ngForm, you will get the following output:

NgForm {_submitted: true, ngSubmit: EventEmitter, form: FormGroup}

The ngSubmit event is what we were binding to, which is of EventEmitter type. There's a FormGroup representing the actual form containing a value Object, which can be passed to a backend. A FormGroup has many properties for holding the form's state and...