Question

What are template driven forms?

Answer 1

Template driven forms are model-driven forms where you write the logic, validations, controls etc, in the template part of the code using directives. They are suitable for simple scenarios and uses two-way binding with [(ngModel)] syntax. For example, you can create register form easily by following the below simple steps,

1. Import the FormsModule into the Application module's imports array

      import { BrowserModule } from '@angular/platform-browser';
      import { NgModule } from '@angular/core';
      import {FormsModule} from '@angular/forms'
      import { RegisterComponent } from './app.component';
      @NgModule({
        declarations: [
          RegisterComponent,
        ],
        imports: [
          BrowserModule,
          FormsModule
        ],
        providers: [],
        bootstrap: [RegisterComponent]
      })
      export class AppModule { }
2. Bind the form from template to the component using ngModel syntax

   <input type="text" class="form-control" id="name"
     required
     [(ngModel)]="model.name" name="name">
3. Attach NgForm directive to the tag in order to create FormControl instances and register them

   <form #registerForm="ngForm">
4. Apply the validation message for form controls

   <label for="name">Name</label>
   <input type="text" class="form-control" id="name"
          required
          [(ngModel)]="model.name" name="name"
          #name="ngModel">
   <div [hidden]="name.valid || name.pristine"
        class="alert alert-danger">
     Please enter your name
   </div>
5. Let's submit the form with ngSubmit directive and add type="submit" button at the bottom of the form to trigger form submit.

   <form (ngSubmit)="onSubmit()" #heroForm="ngForm">
   // Form goes here
   <button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">Submit</button>

Finally, the completed template-driven registration form will be appeared as follow.

<div class="container">
  <h1>Registration Form</h1>
  <form (ngSubmit)="onSubmit()" #registerForm="ngForm">
    <div class="form-group">
      <label for="name">Name</label>
        <input type="text" class="form-control" id="name"
               required
               [(ngModel)]="model.name" name="name"
               #name="ngModel">
        <div [hidden]="name.valid || name.pristine"
             class="alert alert-danger">
          Please enter your name
        </div>
    </div>
    <button type="submit" class="btn btn-success" [disabled]="!registerForm.form.valid">Submit</button>
    </form>
</div>