Template-Driven Forms

|
| By Webner

Introduction

Template-driven forms are the kind of forms in Angular. In Template Driven Forms, we specify validations using directives and attributes. In this approach, we define the template that we want to use in forms. So, this approach is called a template-driven approach. In other words, we write our logic, validations, etc. in the template part (i.e, HTML code) as template-driven form similar to an HTML form.

How do the Template Driven Forms work?

Before understanding the inner-working behind template-driven forms, one needs to be familiar with two terms:

  • FormControl
  • FormGroup

FormControl: It helps to tracks the value and validation of an individual form control. We need to create an instance of the FormControl class for each input field. For example, we get the value of the input field, we can check whether the content of the input field has been changed or not, we are even able to check that the field contains a valid value or not.
There exist different properties in FormControl. These are as follows.

  • valid
  • invalid
  • dirty
  • pristine
  • touched
  • untouched
  • value
  • Errors

The ngForm directive makes the top-level FormGroup.

<pre>Valid? {{f.form.controls.email?.valid}}</pre>
<pre>Dirty? {{f.form.controls.email?.dirty}}</pre>
<pre>Touched? {{f.form.controls.email?.touched}}</pre>

FormGroup: It tracks the value and validity of FormControl instances. The group of controls in a form represents FormGroup. Each form in a group of controls refers to a form group. In other words, we can say that each form group can consist of multiple form controls. As, we can easily access each form control elements various properties (e.g, valid, invalid, dirty, pristine, etc.).We do this by using the ngModel directive.
<input type=”text” name=”firstname” ngModel>

Here is an example:

Component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
@Component({
selector: 'app-formdemobasics',
templateUrl: './formdemobasics.component.html',
styleUrls: ['./formdemobasics.component.css'] })
export class FormdemobasicsComponent implements OnInit {
constructor() { }
ngOnInit() {
}
Register(regForm:NgForm){
console.log(regForm);
}
}

Component.html

<div class="container">
<div class="row">
<div class="form_bg">
<form #form="ngForm" (ngSubmit)="registerUser(form)">
<h2 class="text-center">Registration page</h2>
<br/>
<div class="form-group">
<input type="text" class="form-control" placeholder="First Name" name="firstname" required ngModel>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Last Name" name="lastname" required ngModel>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" email required ngModel #email="ngModel">
<span class="help-bpx" *ngIf="email.touched && !email.valid ">Please enter the Email Value</span>
</div>
<div class="form-group">
</div>
<br/>
<div class="align-center">
<button type="submit" class="btn btn-default" id="register" [disabled]="!form.valid" >Register</button>
</div>
</form>
</div>
</div>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *