Template-driven vs. Model-driven forms
Explore the two main Angular form approaches: template-driven and model-driven (reactive) forms. Understand how template-driven forms use ngModel for simple validation and binding, while reactive forms rely on component class logic with FormControl and FormGroup. This lesson helps you grasp the core concepts needed to manage user input effectively in Angular applications.
We'll cover the following...
Angular uses forms to handle user input. Angular provides the following two different approaches for managing this input.
- Template-driven approach
- Model-driven approach/Reactive approach
Let’s discuss each one of these.
Template-driven forms
Template-driven forms allow us to create simple forms where we can use directives likengModel. We need to import them using FormsModule from the @angular/forms package as they are not available by default like in AngularJS.
The following example shows a simple template-driven form.
<form #form="ngForm" (ngSubmit)="onSubmit()">
<label>First