Working with Template Driven Forms

This post is meant for those who want to start working with Template Driven Forms.

Angular provides these directives, specific designed to work with forms that you can use to add behaviour to a HTML form, such as form validation.

The first thing to do is to import the FormsModule from @angular/forms and add it in app.module.ts of the project, like this:

import { FormsModule } from '@angular/forms';
@NgModule({ 
 declarations: [ AppComponent ], 
 imports: [ BrowserModule, FormsModule ],
 providers: []
}) 
export class AppModule { }

Then, we add this next form in a component HTML, like is shown below:

<form #f="ngForm" novalidate (ngSubmit)="onChanges(f.valid)">
 <input type="text" placeholder="name" [(ngModel)]="name" name="name" #user_name="ngModel" maxlength="20" required>
 <div *ngIf="!user_name.valid && user_name.touched">
  Name is required!
 </div>

 <input type="text" placeholder="lastName" [(ngModel)]="lastName" name="lastName" #user_lastName="ngModel" minlength="5" required>
 <div *ngIf="!user_lastName.valid && user_lastName.dirty">
  Last name is required!
 </div>
 <button type="submit" [disabled]="!f.valid">Send</button> 
</form>

In the previous example there is a basic form with only two input fields and a submit button, but we can see some interesting stuff:

• #f=”ngForm”: we asggined a name to our form in order to be able to access its value and validity So,  f.valid will return false unless all the elements of the form pass their validation checks.

• All form fields have template references that allow us to access the value and its validity. As an example we have #user_name=”ngModel” or #user_lastName=”ngModel”

• If a field has an ngModel directive should also have a name attribute defined, but it’s not neccessary to be exactly the same.

• The submit button will be disabled as long as the form is invalid.

• In template-driven form, HTML elements use required attribute for required validation.

• When the user clicks on the “Send” button the onChanges component method will be called, because it’s specified in the ngSubmit directive of the form.

Now, another thing we have to take into account are the Validity States:

• ng-touched / ng-untouched: if the field has been focused (user accessed it), ng-touched is true, else ng-untouched will be true.

• ng-dirty / ng-pristine: ng-dirty is true when the field value has changed, ng-pristine otherwise.

• ng-valid / ng-invalid: ng-valid when the value is valid, ng-invalid otherwise.

So, geeting back to our example, when the first input field lose focus and is empty the error message will be shown. Something similar happens with the second input field.

In conclusion,  Template Drive Forms uses the Angular directives in the template to handle the forms. It’s an easy way to work with form validation because everything is defined in the template itself.

So, I hope this blog was helpful for you and thanks for reading us!