Template Driven and Reactive Forms Datepicker Angular Material 12

In this post, we will learn how to use the Angular Forms API with Datepicker, also we will learn with Template Driven Forms (ngModel).

Let's start.

We will work with Angular forms. You will have the next advantages, reactive por example is Explicit, Created in component class, Structured and immutable, Synchronous and form validation through functions.

We will work with Template Driven. You will have the next advantages, is implicit, created by directives, unstructured and mutable, Asynchronous and form validation through directives.

In my case both are useful however it depends on what will be done in your application.

If you want more documentacion go to Angular documentacion.

In this post. I will give two basic examples.

Case: we will have two calendars from the first Datepicker to update second Datepicker, with Angular Forms and Template Driven. ok let go.

In both examples I used moment js for format date.

Run both examples on Stackbliz.

Angular Forms

Ts class.

import { Component, OnInit, VERSION } from '@angular/core';
import {
  FormBuilder,
  FormGroup,
  FormControl,
  Validators,
} from '@angular/forms';

import {
  MomentDateAdapter,
  MAT_MOMENT_DATE_ADAPTER_OPTIONS,
} from '@angular/material-moment-adapter';
import {
  DateAdapter,
  MAT_DATE_FORMATS,
  MAT_DATE_LOCALE,
} from '@angular/material/core';


import * as _moment from 'moment';

import moment from 'moment';

export const MY_FORMATS = {
  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@Component({
  selector: 'app-fdatepicker',
  templateUrl: './fdatepicker.component.html',
  styleUrls: ['./fdatepicker.component.css'],
  providers: [
    // `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
    // application's root module. We provide it at the component level here, due to limitations of
    // our example generation script.
    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS],
    },

    { provide: MAT_DATE_FORMATS, useValue: MY_FORMATS },
  ],
})
export class fdatepickerComponent implements OnInit {
  constructor(private fb: FormBuilder) {}

  formPopPup: any;

  date1 = new FormControl(moment());
  date2 = new FormControl(moment());

  ngOnInit() {
    this.formPopPup = new FormGroup({
      firstDate: new FormControl(),
      secondDate: new FormControl(),
    });

    this.formPopPup = this.fb.group({
      firstDate: [null, Validators.required],
      secondDate: [null, Validators.required],
    });
  }

  OnDateChange(e: any) {
    var new_date = moment(e, 'DD-MM-YYYY').add(0, 'days').add(2, 'months');

    this.formPopPup.get('secondDate').setValue(new_date);
  }
}

Html

<p>Angular Forms Example</p>
<mat-sidenav-container>
  <form [formGroup]="formPopPup">
    <table>
      <tr>
        <td>
          <mat-form-field>
            <input
              matInput
              [matDatepicker]="fi"
              formControlName="firstDate"
              #firstDate
              [formControl]="date1"
              (dateInput)="OnDateChange($event.value)"
            />
            <mat-datepicker-toggle matSuffix [for]="fi"></mat-datepicker-toggle>
            <mat-datepicker #fi> </mat-datepicker>
          </mat-form-field>
        </td>
        <td>
          <mat-form-field>
            <input
              matInput
              [matDatepicker]="se"
              formControlName="secondDate"
              [formControl]="date2"
            />
            <mat-datepicker-toggle matSuffix [for]="se"></mat-datepicker-toggle>
            <mat-datepicker #se> </mat-datepicker>
          </mat-form-field>
        </td>
      </tr>
    </table>
  </form>
</mat-sidenav-container>

Template Driven

Ts class.

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

import * as _moment from 'moment';

import moment from 'moment';

@Component({
  selector: 'app-tdatepicker',
  templateUrl: './tdatepicker.component.html',
  styleUrls: ['./tdatepicker.component.css'],
})
export class tdatepickerComponent {
  date1: any;
  date2: any;

  dateChangeHandler(e: any) {
    var new_date = moment(new Date(this.date1), "DD-MM-YYYY").add(0, 'days').add(3, 'months');
    this.date2 = new_date;
  }
}

Html

<p>Template driven</p>
<mat-sidenav-container>
  <table>
    <tr>
      <td>
        <mat-form-field>
          <input
            matInput
            [matDatepicker]="d1"
            (dateChange)="dateChangeHandler($event)"
            [(ngModel)]="date1"
          />
          <mat-datepicker-toggle matSuffix [for]="d1"></mat-datepicker-toggle>
          <mat-datepicker #d1> </mat-datepicker>
        </mat-form-field>
      </td>
      <td>
      <mat-form-field>
      <input
        matInput
        [matDatepicker]="d2"
        [(ngModel)]="date2"
      />
      <mat-datepicker-toggle matSuffix [for]="d2"></mat-datepicker-toggle>
      <mat-datepicker #d2> </mat-datepicker>
    </mat-form-field>
      </td>
    </tr>
  </table>
</mat-sidenav-container>

In both cases will be the same and add three months to the second calendar however the angular forms using FormControl in reactive way, whereas Template is driven using ngModel.

References: https://material.angular.io/

TechNotes Central

Tuesday, January 25, 2022