When we started writing Angular 2 apps, we had come from an AngularJS background. So of course our first forms were template driven. All we had to change from AngularJS was ng-model to ngModel and put it in a banana box. As long as the form’s validation remains simple, Template driven forms are probably the way to go primarily due to their simplicity. However as the complexity of the forms grows, especially the validation of the form, its readability and even feasibility go bad pretty quickly. The only other downside to template driven forms is that they can’t be unit tested. In our company most of these sorts of things were tested at an end-to-end level using Gherkin anyway, so less of an issue for us. But again as the complexity grows you might need to start unit testing those edge cases.
So let’s take a relatively straightforward concrete example where the validation requirements might force us into implementing them in Reactive or Model-Driven forms. One side note about the nomenclature, we try to use Model Driven in our company, because we have React projects as well, and things can get pretty confusing distinguishing between a React form and a Reactive form. The example we are going to look at is a change password form. The validation requirements are that the passwords are strong, and that they match.
First let’s take a look at the Template Driven HTML (change-password.component.html)
<div class="container">
<div class="row">
<h2>ChangePassword</h2>
</div>
<div class="row">
<div *ngFor="let error of formErrors" class="list-group-item list-group-item-danger">{{error}}</div>
</div>
<form class="small-form">
<div class="row">
<div class="form-group">
<label for="oldPassword">Old Password</label>
<input id="oldPassword" type="password" name="oldPassword"
[(ngModel)]="oldPassword" class="form-control"/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="newPassword">New Password</label>
<input id="newPassword" type="password" name="newPassword"
[(ngModel)]="newPassword" class="form-control"/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="confirmNewPassword">Confirm New Password</label>
<input id="confirmNewPassword" type="password" name="confirmNewPassword"
[(ngModel)]="confirmNewPassword"class="form-control"/>
</div>
</div>
<div class="row">
<button id="btnChangePassword" type="button" class="btn btn-primary"
(click)="changePassword()">Change Password</button>
</div>
</form>
</div>
And here is the TypeScript (change-password.component.ts)
export class ChangePasswordComponent {
formErrors: string[];
oldPassword: string;
newPassword: string;
confirmNewPassword: string;
constructor() { }
changePassword() {
// submit to server
if (this.newPassword!==this.confirmNewPassword){
this.formErrors=["Passwords don't match"];
} else {
this.formErrors=[];
}
}
}
So far no validation. It *is* possible to write template validation using directives, but it is much simpler using Model-driven forms. To convert over the first thing we need to remember is to add the ReactiveFormsModule to your module (app.module.ts)
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
and
imports:[ BrowserModule, FormsModule, ReactiveFormsModule
Then at the top of your component (change-password.component.ts) you will need to add:
import { FormBuilder, FormGroup } from '@angular/forms';
In the fields section of your component replace
oldPassword: string; newPassword: string; confirmNewPassword: string;
with
form: FormGroup;
Lastly, change the constructor to this:
constructor (protected formBuilder: FormBuilder) {
this.form=formBuilder.group({
oldPassword:[''],
newPassword:[''],
confirmNewPassword:['']
});
}
So basically there is one field where there use to be three, but the constructor was expanded to initialize the form with those three values.
Now let’s change the HTML (change-password.component.html). First find the form element, and change
<form class="small-form">
to
<form [formGroup]="form" class="small-form">
Lastly, change all banana in a boxed ngModels, e.g. [(ngModel)] to formControlName. Here is an example change:
<input id="oldPassword" type="password" name="oldPassword"
[(ngModel)]="oldPassword" class="form-control"/>
to
<input id="oldPassword" type="password" name="oldPassword"
formControlName="oldPassword" class="form-control"/>
After doing that for all 3 fields. Voila! it is converted.
In Part 2 I will talk about the validation.
