Angular Forms (Part 4) -Template Driven Forms

Angular Template Driven Forms

The Angular Template Driven Forms are simple forms which can be used to develop forms. These are called template driven as everything we are going to use in a application is defined into the template that we are defining along with the component.

--------------------------------------------------------------------------
Validations applied to controls with in a template is called TDF validations
TDF validations is based on HTML5 validations, this will use html5 attributes
 1.required
 2.minlength
 3.maxlength
 4.pattern

Syntax:
   <form #modelname="ngForm"  [ngFormOptions]="{updateOn:'change|blur|submit'}">
   

<input [(ngModel)]="fieldname"  name="controlname"  required|minlength|maxlength|pattern="">
       ...
   </form>

ngForm keyword will generate FormGroup object,this will be referenced
    by modelname
  ->controlname will be considered as model property name,it is recommended
    to provide controlname same as fieldname
  

->FormGroup and FormControl props[like invalid,touched,..] will be same as MDF validations

Steps 

1 Import the namespace

import{FormsModule} from "@angular/forms";

Create a basic Registration Form

.Ts Changes

import { Component } from '@angular/core';

import { NgForm } from '@angular/forms';

@Component({

  selector: 'app-formsvalidation',

  templateUrl: './formsvalidation.component.html',

  styleUrls: ['./formsvalidation.component.css']

})

export class FormsvalidationComponent {

  RegisterStudent(studentForm: NgForm): void {  

    console.log(studentForm.value);

  }

}

.Html Changes

<div class="container">

    <div class="row">

        <div class="form-bg">

            <form #studentForm="ngForm" (ngSubmit)="RegisterStudent(studentForm)">

              <div class="panel panel-primary">

                <div class="panel-heading">

                  <h3 class="panel-title">Student Registration</h3>

                </div>

                <div class="panel-body">

                 

                  <div class="form-group">

                    <label for="firstName">First Name</label>

                    <input id="firstName" type="text" class="form-control"

                          name="firstName" ngModel>

                  </div>

                  <div class="form-group">

                    <label for="lastName">Last Name</label>

                    <input id="lastName" type="text" class="form-control"

                          name="lastName" ngModel>

                  </div>

                  <div class="form-group">

                    <label for="email">Email</label>

                    <input id="email" type="text" class="form-control"

                          name="email" ngModel>

                  </div>

                </div>

                <div class="panel-footer">

                  <button class="btn btn-primary" type="submit">Submit</button>

                </div>

              </div>

            </form>

        </div>

    </div>

  </div>

Understanding the code

NgForm:

It is the directive which helps to create the control groups inside form directive.

NgModel

When we add ngModel directive to the control, all the input elements are registered with the NgForm.

Next important thing is to consider is that when we use ngModel with form tag, then we should have to use the name property of the HTML control.

#studentForm is called the template reference variable and if you notice we have assigned “ngForm” as the value for the template reference variable studentForm. So the studentForm reference variable holds a reference to the form.

Output

If you get the below error then you might have forgotten to import the formmodule in the

appModule.ts