Template-driven forms are the most common way to handle user input in simple Angular applications. They are easy to write and easy to understand.
1The Power of ngModel
The ngModel directive is the star of the show. It creates a FormControl instance from a domain model and binds it to a form control element. It tracks the value, the state (touched, dirty, pristine), and the validity of the input. This automation allows you to focus on your data rather than the mechanics of DOM manipulation and event listening.
2Template References
By using the hash symbol (#), you can 'capture' the instance of the ngForm directive that Angular automatically attaches to your <form> tags. This reference gives you a powerful API in your template: you can check if the entire form is valid, access all of its values as a single JSON object, and even disable buttons based on the form's current state—all without writing a single line of TypeScript.
