Template Driven Form and Reactive Form

 

Template Driven Form and Reactive Form

Table of Contents

1. Why not Template Driven Forms? Why Reactive Forms? 
2. What is Fluent Validation?

Why not Template Driven Forms? Why Reactive Forms? 

Template-driven forms are:

• Contains little code in the component class as its logic contains in (template) html.
• Easier to set up .

While they are:

• Difficult to add controls dynamically.
• Unit testing is a challenge because logic are in template(html) not in typescript.
• Their readability will quickly drop as we add more and more validators and input tags; keeping all their logic within the template might be fine for small forms, but it doesn't scale well when dealing with complex data items.

Reactive Forms are:

• More flexible than template driven form.
• Handles any complex scenarios.
• No data binding is done (immutable data model preferred by most developers).
• More component code and less HTML markup.
• Easier unit testing.
• Model-driven(Reactive) forms are used in creating medium to large scale applications.
• It provides flexibility to add client-side validation.
• Moreover we can create custom validator.

Open app.module.ts and below code to add a reactive form module:

import { BrowserModule } from '@angular/platform-browser';  

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

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

import { AppRoutingModule } from './app-routing.module';  

import { AppComponent } from './app.component';  

import { RegistrationFormComponent } from './registration-form/registration-form.component';  

@NgModule({  

  declarations: [  

    AppComponent,  

  ],  

  imports: [  

    BrowserModule,  

    AppRoutingModule,  

    ReactiveFormsModule  

  ],  

  providers: [],  

  bootstrap: [AppComponent]  

})  

export class AppModule { }  

After that you can use in component.ts file where you want to use reactive forms:

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

import { FormBuilder, FormGroup, Validators } from '@angular/forms';  

@Component({  

  selector: 'app-registration-form',  

  templateUrl: './registration-form.component.html',  

  styleUrls: ['./registration-form.component.css']  

})  

export class RegistrationFormComponent implements OnInit {  

  registerForm: FormGroup;

  submitted : Boolean;

  constructor(private formBuilder: FormBuilder) { }  

  ngOnInit() {  

    this.registerForm = this.formBuilder.group({  

      firstName: ['', Validators.required],  

      lastName: ['', Validators.required],  

      address: this.formBuilder.group({  

        street: [],  

        zip: [],  

      })  

    });  

  }  

}  

In html:

<div class="container">  

    <h1>Registration Form</h1>  

    <form [formGroup]="registerForm">  

      <div class="form-group">  

        <label>First Name</label>  

        <input type="text" class="form-control" formControlName="firstName">  

        <p *ngIf="registerForm.controls.firstName.errors" class="alert alert-danger">This field is required!</p>  

      </div>  

      <div class="form-group">  

        <label>Last Name</label>  

        <input type="text" class="form-control" formControlName="lastName">  

        <p *ngIf="registerForm.controls.lastName.errors" class="alert alert-danger">This field is required!</p>  

      </div>  

      <div class="form-group">  

        <fieldset formGroupName="address">  

          <label>Street</label>  

          <input type="text" class="form-control" formControlName="street">  

          <label>Zip</label>  

          <input type="text" class="form-control" formControlName="zip">  

          <label>City</label>  

          <input type="text" class="form-control" formControlName="city">  

        </fieldset>  

      </div>  

      <button type="submit" (click)="submitted=true">Submit</button>  

    </form>  

  <br/>  

    <div [hidden]="!submitted">  

      <h3> Employee Details </h3>  

      <p>First Name: {{ registerForm.get('firstName').value }} </p>  

      <p> Last Name: {{ registerForm.get('lastName').value }} </p>  

      <p> Street: {{ registerForm.get('address.street').value }}</p>  

      <p> Zip: {{ registerForm.get('address.zip').value }} </p>  

    </div>  

  </div>  

     

What is Fluent Validation?

It is a server side validation. Some validation needs to be checked from the database. Previously there was a validation but users were not getting proper error messages. So to address this issue, we are using fluent validation. There are built-in validators as well as we can create our own custom validators. With the help of fluent validation, we can send user a custom error messages and easily notify about the error.