Template Driven Form — Angular 7

Angular Form

Angular provides two different approaches to handle user inputs through forms.

  1. Template Driven Form
  2. Reactive Form

Template Driven Form: As name suggests, it is a template driven form or you can say, it is a native HTML based form. It is useful to handle simple user input operations, such as to Create a login form or a form with less controls, minimum logics or with minimum validations.

Form Control drives through angular “ngModel” directive. It is responsible for creating and managing form instance.

To add validation, we use the same html validation attributes like ‘required’, ‘minLength’ etc. Every time the value changes, Angular runs validation and generates either a list of errors(define control invalid status) or null(define control valid status).

# Live Demo — Click here

# Create Form

As Template Driven Form drives through ‘ngModel’, we first need to include FormsModule in application module. I added in app.module.ts. Import ‘FormsModule’ at the top of module file and add it in imports array list of ngModule decorator.

Create a Form Tag in html file and store it in reference variable. We will use it later on html page.

#PersonForm hold the form reference here. Now, we need to create form control inside. In this Demo, we are going to create two Form controls named ‘FirstName’ and ‘LastName’.

Each control must have name property. I have also stored reference of each control that i’ll use for validations later.

Note: #firstName=”ngModel”- Angular’s ngModel not only stores data but also tells about control state, whether touched or inValid. This state also helps angular to update ‘Angular CSS Classes’ to element based on control state. Eg: ‘ng-valid’, ‘ng-dirty’, ‘ng-touched’ etc.

Form Control is linked with ngModel directive, so we need to create property for that in component.ts file.

Nothing is surprising here. It is a simple component definition file. To reset form, i’ve created a function named clearForm. We will send a formReference as argument and will reset that form.

# Validation

Remembered, we have stored formReference with the name of ‘personForm’ and each control’s reference with a name with prefix ‘#’. Here, we will use it to validate form and display validation messages accordingly.

I want to display validation message after form submition, not after changing form control’s value. Control’s reference variable will give control state whether it is touched or not along with list of validation error if any. So we will use it now.

As you can see above, we have a div that display error messages if form is submitted and #firstName is invalid. We have added two validation block here based on error type. As first name is a required control and it has a pattern validator too, error blocks will be visible accordingly.

# Get/Set Form Value

As Template Driven Form drives through ngModel directive, you can simply use ngModel variable to get/set form value. Just above in component.ts file, we have initialised person with some value.

I hope it will help you to understand Template Driven Form. You can check complete code here. In Next Blog, we will explore Reactive Form.


## Author

Dheeraj Jaiswal

Frontend Developer