Angular Forms (Template Driven Forms)

In this article, we are going to talk about Angular2 Forms. Forms are really important to collect the data from the users. Often, each website contains forms to collect the data. Let’s say our website has a registration form to collect the information from the users and we need to validate the form data as well before submitting the data.

Angular provides 2 different ways to collect and validate the data from a user.

• Template-driven forms
• Model-driven forms

In this article, we will learn how to use and validate the template driven forms. I am using bootstrap classes to apply some basic style to the form elements in order to give a visual indication to the user about the control's validity.

Let's open template-form.component.html and paste the following code to render a simple form.

HTML code

<div class="container">
    <form class="form-horizontal" #userForm="ngForm" (ngSubmit)="submitForm(userForm.value)" novalidate>
        <div class="form-group">
            <label class="control-label col-sm-2" for="email">First Name:</label>
            <div class="col-sm-10">
                <input type="text" #firstName="ngModel" minlength="5" maxlength="10" class="form-control" required placeholder="Enter first name"
                    name="firstName" ngModel>
                <div *ngIf="firstName.errors && firstName.dirty">
                    <div class="alert alert-danger" *ngIf="firstName.errors.required">Name is required</div>
                    <div class="alert alert-danger" *ngIf="firstName.errors.minlength">Name should have minimum 5 characters</div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="pwd">Email:</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="Enter email" name="email" ngModel>
            </div>
        </div>
        <div ngModelGroup="address">
            <div class="form-group">
                <label class="control-label col-sm-2" for="pwd">Country:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" placeholder="Enter country" name="country" ngModel>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-2" for="pwd">City:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" placeholder="Enter city" name="city" ngModel>
                </div>
            </div>

            <div class="form-group">
                <label class="control-label col-sm-2" for="pwd">Postal Code:</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" #potalCode pattern="^[0-9][1-9]{4}$" placeholder="Enter postal code" name="postalCode"
                        ngModel>
                    <div *ngIf="potalCode.errors && potalCode.dirty">
                        <div class="alert alert-danger" *ngIf="potalCode.errors.pattern">Please enter proper postal code</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary" [disabled]="!userForm.valid">Submit</button>
            </div>
        </div>
    </form>
</div>

HTML output screenshot

In the HTML code, as you can see I have used form tag at the top to declare the form, see the below code.

<form class="form-horizontal" #userForm="ngForm" (ngSubmit)="submitForm(userForm.value)" novalidate>

I have created the reference variable userForm using ngForm inbuilt directive to refer the form.

Whenever a user clicks on the Submit button of the form, ngSubmit event gets fired and here, I am passing the form values to submitForm() function using the reference variable. And submitForm() function is present in .ts file.

You can see that I am using ngModel inbuilt directive to register the input controls and its value with the form.

<input type="text" #firstName="ngModel" minlength="5" maxlength="10" class="form-control" required placeholder="Enter first name" name="firstName" ngModel>

For adding Validation:

In the above form, I have also added some basic validations, such as required and minlength. So, I am adding validation messages/css classes to the form control based on control's validity. Angular adds some classes to controls by default based on the control's state.

State	True	False
Valid	ng-valid	ng-invalid
Controls value changed	ng-dirty	ng-pristine
Control is visited	ng-touched	ng-untoched

So, we can easily use these classes to apply some basic validation/css styling to form element in template driven forms.

<div class="form-group">
    <label class="control-label col-sm-2" for="email">First Name:</label>
    <div class="col-sm-10">
        <input type="text" #firstName="ngModel" minlength="5" maxlength="10" class="form-control" required placeholder="Enter first name"
            name="firstName" ngModel>
        <div *ngIf="firstName.errors && firstName.dirty">
            <div class="alert alert-danger" *ngIf="firstName.errors.required">Name is required</div>
            <div class="alert alert-danger" *ngIf="firstName.errors.minlength">Name should have minimum 5 characters</div>
        </div>
    </div>
</div>

I have added firstName as a reference variable to the control and I’m using errors property to check the errors of the controls and based on the condition, I’m showing different error messages.

.ts file code

import { Component } from '@angular/core'

@Component({
    selector: 'my-app',
    templateUrl: './templatedrivenforms/template-form.component.html',
    styles: [
        `input.ng-valid{ border-left:10px solid green }
        input.ng-invalid { border-left:10px solid red }`
    ]
})
export class TemplateFormComponent {
    submitForm(values: any) {
        console.log(values);
    }
}

Now, refresh the browser and fill all the required details.

Click "Submit" and check the console log, as shown below.

Once we click the Submit button, it calls that submitForm function and a console log as above.

In our next article, we will learn about Model-driven forms.

I hope this will help you. Thanks.

You can download the complete code from my GitHub repository.