Search results

Template-driven forms in Angular DatePicker component

02 Dec 2022 / 1 minute to read

The form can be build with Angular template syntax easily along with form specific directives. This template-drive forms uses the ng directives in view to handle the forms controls.

  • To enable the template-driven, import the FormsModule into corresponding app component.

For more details about template-driven Forms refer to:

  • In angular forms mentioning the name is must to process as form elements.
  • Mention the name attribute to DatePicker element which will be used to identify the form element. To register an DatePicker element to ngForm, give the ngModel to it so the FormsModule will automatically detect the DatePicker as a form element. After that, the DatePicker value will be selected based on the ngModel value.
Copied to clipboard
import { Component,ViewChild, ViewEncapsulation, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { CalendarComponent } from '@syncfusion/ej2-angular-calendars';

class User {
constructor() {
    public date: Date

selector: 'app-root',
templateUrl: './app/template.html'
export class DefaultDatePickerComponent {

user: User;
ngOnInit() {
    this.user = new User(null);

onSubmit(userForm) {
    (userForm.valid) ? alert("submitted"): alert("form is invalid");

Copied to clipboard
import { DefaultDatePickerComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';

    imports: [ FormsModule, ReactiveFormsModule, BrowserModule, DatePickerModule],
declarations: [DefaultDatePickerComponent],
bootstrap: [DefaultDatePickerComponent]
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

Copied to clipboard
  <form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
    <div class="form-group">
      <ejs-datepicker id="datepicker" name="date"  [(ngModel)]="" #date="ngModel" width="300px" required></ejs-datepicker>
        <div  *ngIf="userForm.invalid && (userForm.dirty || userForm.touched)" class="alert alert-danger formerror">
          Valid date is required
        <div *ngIf="userForm.valid && (userForm.dirty || userForm.touched)" class="alert alert-success formerror">
              <td style="width:50%">Selected value: </td>
              <td class="formtext ">{{ | date:"dd/MM/yyyy"}}</td>
    <div class="buttons">
    <button type="submit" class="e-btn e-success">Submit</button>
    <button type="reset" class="e-btn e-warning">Reset</button>

  <div class="dataclass">userForm.value: {{userForm.value | json}}</div>
  <div class="dataclass">userForm.valid: {{userForm.valid}}</div>


  form {
    margin-top: 50px;
Copied to clipboard
#container {
    visibility: hidden;
#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;

#element {
    display: block;
    height: 350px;

#wrapper {
    width: 335px;

#submitbutton, .e-warning{
.dataclass {
    background: #f3f3f3;
    border: 1px solid #c6c4c43f;
    padding: 10px;
.formerror, .dataclass{
.buttons, #wrapper,#loader{
    margin:0 auto;
    text-align: center;
.formerror, .dataclass{
    margin: 10px 0 0 18px;