Angular Forms (Template Driven Forms)

Mahesh Patil

17 Comments

Join the conversation! Your thoughts help the community grow.

Nilesh Chaudhar8y ago
Hi Mahesh , outstanding article. In these busy schedule you make our life easy to work on Anjular with the good approach. Looking forward to see your each and every article.
- Mahesh Patil8y ago
  Thanks Nilesh for such a great feedback.
Aruljothy Sundaramoorthy8y ago
Its not working for me...!
- Mahesh Patil8y ago
  Hello, Aruljyoti, could u please tell me what error are u getting ? still you can follow below steps - 1)Go to the github repository using the link present at the end of article 2)clone the code from the repository 3)Open command prompt and first install the required node modules using npm install 4)After installing node modules use npm run command to run the application. let me know if your still facing the same issue. you can share your error details on my email - [email protected]
muqeem khan8y ago
I love to see when someone explain very complicated things in simple way... and you just did that! Thank you! :)
- Mahesh Patil8y ago
  Thanks muqeem for your valuable comment.
joker i8y ago
Just what I was looking for...Keep sharing
- Mahesh Patil8y ago
  Thanks for your valuable comment.
ALOK SHARMA8y ago
Very nice ..detailed understanding of each tag in the form
- Mahesh Patil8y ago
  Thanks Alok for your feedback
Ravindra Parcha8y ago
Nice and good collective knowledge. Very helpful for beginer
- Mahesh Patil8y ago
  Thanks Ravindra for your comment.
Shrikant Jadhav8y ago
Very nice article. Upload more articles with new features. Keep it up. I’m waiting for new articles.
- Mahesh Patil8y ago
  Thanks Shrikant,Yes sure i will upload article soon.
Mayuri Yeole8y ago
Helpful Article with examples!!
- Mahesh Patil8y ago
  Thanks alot mayuri.
rakshith suvarna8y ago
Nice Article Superb!

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

Angular

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.
Angular

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

Angular

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.