Intro to Reactive Forms in Angular - Building a Form with Groups

Demo: Submit a Form & Inspect Form Model


In order to capture the form values, we'll tie it to a submit event. At the form level, we'll add an event listener of (ngSubmit) and bind it to a method called submitForm() which just logs out our form. To trigger this event, a button needs to be added that has type="submit", which will in turn trigger the (ngSubmit) to call the submitForm() method.

Lastly, when we click submit, we'll inspect what logs in the console. This represents the Form Model, the source of truth behind the form that we created in the component. When inspecting the Form Model, we can see the structure of the controls that our form contains, the state, whether form fields have been touched, and values. This is helpful to us in debugging and further understanding what's being tracked in the form.