Template-driven forms in Angular DateTimePicker component

18 May 2022 / 2 minutes to read

The form can be build with Angular template syntax easily along with form specific directives. This template-driven 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:https://angular.io/guide/forms#template-driven-forms.

In angular forms mentioning the name is must to process as form elements.
Mention the name attribute to DateTimePicker element which will be used to identify the form element. To register an DateTimePicker element to ngForm, give the ngModel to it so the FormsModule will automatically detect the DateTimePicker as a form element. After that, the DateTimePicker value will be selected based on the ngModel value.

The following example demonstrates template driven forms with DateTimePicker component.

Source

Preview

app.component.ts

app.module.ts

main.ts

template.html

styles.css

import { Component,ViewChild, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { DateTimePickerComponent } from '@syncfusion/ej2-angular-calendars';

class User {
constructor() {
    public datetime: Date
}
}

@Component({
selector: 'app-root',
templateUrl: './app/template.html'
})
export class DefaultDateTimePickerComponent {
constructor() {}
user: User;
ngOnInit() {
    this.user = new User(null);
}

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

}

import { DefaultDateTimePickerComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DateTimePickerModule } from '@syncfusion/ej2-angular-calendars';


@NgModule({
    imports: [ FormsModule, ReactiveFormsModule, BrowserModule, DateTimePickerModule],
declarations: [DefaultDateTimePickerComponent],
bootstrap: [DefaultDateTimePickerComponent]
})
export class AppModule { }

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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

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

</div>

<style>
  form {
    margin-top: 50px;
  }
</style>

#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{
    margin-right:20px;
}
.dataclass {
    margin-top:20px;
    background: #f3f3f3;
    border: 1px solid #c6c4c43f;
    padding: 10px;
    text-align:left;
}
.formerror, .dataclass{
    width:300px;
}
.buttons, #wrapper,#loader{
    margin:0 auto;
    text-align: center;
}
.formerror, .dataclass{
    margin: 10px 0 0 18px;
}