Template-driven vs. Model-driven forms

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 Name:</label>
   <input type="text" [(ngModel)]="user.firstName" required>

    <label>Password:</label>
    <input type="password" [(ngModel)]="user.password" required>
    <button type="submit" [disabled]="!form.valid">Submit</button>
    </form>

This looks like a regular form taking input from the user for the name and password fields, and on the click of the Submit button, it submits the whole form if all the required fields are filled.

The important part to notice here is the use of [(ngModel)].

Recall from chapter 4, lesson 1, i.e., Binding the data in components, we discussed Two-way data binding.

The[(ngModel)] syntax is also known as banana in the box syntax. This basically creates a bi-directional flow of data in the forms. The user can input the value for a particular field and then display it back on the view by interpolating that field.

The form error states are applied to the form fields to track and display the errors. You can use the following CSS classes for this as well.

• touched or untouched
• valid or invalid
• pristine or dirty

The best part about using template-driven forms is that both the validation and data binding is taken care of at the template level.

Angular then internally takes care of associating a form control field to every input, applies validation as specified in the input attribute, and does the data binding in the presence of the ngModel directive.

None of this works without importing the FormsModule. That is what allows you to do form-related stuff in Angular.

So, if you get to see some error like:

Can't bind to ngModel since it is not a known property of input.

It means, you either missed to import the FormsModule or imported it in the wrong file.

Reactive forms

In the template-driven approach, most of the logic is driven from the template, whereas in the reactive-driven approach, it resides in the component class, and there is very little code in the template.

A reactive form is developed by importing the ReactiveFormsModule from the @angular/forms package.

These are some important terms to know before you go ahead with creating a form based on the reactive approach.

• FormControl
• FormGroup
• FormArray
• FormBuilder
• formGroupName
• formControlName

We will see a complete demo of forms in the upcoming chapter.