Angular
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Reactive Form in Angular DatePicker component

22 Nov 2022 / 2 minutes to read

DatePicker is a form component and validation is playing vital role in forms to get the valid data. Here to showcase the DatePicker with form validations we have used the reactive form.

  • The reactive forms uses the reactive model-driven technique to handle form data between component and view, due to that we also call it as the model-driven forms. It’s listen the form data changes between App component and view, also it returns the valid states and values of form elements.

For more details about Reactive Forms refer: https://angular.io/guide/reactive-forms.

  • For the reactive forms, import a ReactiveFormsModule into app module as well as the FormGroup, FormControl should be imported to app component. The FormGroup is used to declare formGroupName for the form and the FormControl is used to declare formControlName for form controls. Declare the formControlName to DatePicker component as usual. Then, create a value object to the FormGroup and each value will be the default value of the form control.

The following example demonstrates how to use the reactive forms.

Source
Preview
app.component.ts
app.module.ts
main.ts
template.html
styles.css
Copied to clipboard
import { Component, ViewChild, OnInit, ElementRef, Inject } from '@angular/core';
import { DatePickerComponent } from '@syncfusion/ej2-angular-calendars';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ButtonComponent } from '@syncfusion/ej2-ng-buttons';
import { FormsModule } from '@angular/forms';


@Component({
selector: 'app-root',
templateUrl: './app/template.html'
})
export class AppComponent implements OnInit {
@ViewChild('ejDatePicker') ejDatePicker: DatePickerComponent;
public targetElement: HTMLElement;
public placeholder: String = 'Date of Birth';
skillForm: FormGroup;
build: FormBuilder;
constructor(@Inject(FormBuilder) private builder: FormBuilder) {
    this.build = builder;
    this.createForm();
}
createForm() {
    this.skillForm = this.build.group({
        datepicker: ['', Validators.required],
        username: ['', Validators.required],
        usermail: ['', Validators.email],
    });
}
get username() {
    return this.skillForm.get('username');
}
get datepicker() {
    return this.skillForm.get('datepicker');
}
get usermail() {
    return this.skillForm.get('usermail');
}

onSubmit() {
    alert("Form Submitted!");
}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,FormsModule, ReactiveFormsModule, DatePickerModule, ButtonModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<div class="row" style="width:480px; height: 250px;">
  <div class="col-xs-7 col-sm-7 col-lg-7 col-md-7" style="padding-top:20px;">
    <div class="outerbox">
      <div style="padding:30px;">
        <form [formGroup]="skillForm" novalidate id="formId" (ngSubmit)="onSubmit()">
          <div class="form-group">
            <ejs-datepicker #ejDatePicker formControlName="datepicker" name="datepicker" [placeholder]='placeholder' floatLabelType='Auto'>
            </ejs-datepicker>
            <div *ngIf="datepicker.invalid && (datepicker.dirty||datepicker.touched)" class="alert alert-danger">
                Enter DOB in MM/dd/yyyy.
            </div>
          </div>
          <div class="form-group" style="padding-top:10px;">
            <div class="e-float-input">
              <input type="text" formControlName="username" name="username" minlength="8" />
              <span class="e-float-line e-label-top"></span>
              <label class="e-float-text e-label-top">User Name:</label>
              <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">
                <div *ngIf="username.errors.required">
                  Name is required.
                </div>
                <div *ngIf="username.errors.minlength">
                  Name must be at least 8 characters long.
                </div>
              </div>
            </div>
          </div>
          <div class="form-group" style="padding-top:10px;">
            <div class="e-float-input">
              <input type="email" formControlName="usermail" name="usermail" />
              <span class="e-float-line e-label-top"></span>
              <label class="e-float-text e-label-top">Email:</label>
              <div *ngIf="usermail.invalid && (usermail.dirty || usermail.touched)" class="alert alert-danger">
                Valid Email is required.
              </div>

            </div>
          </div>
          <div class="form-group footer" style="padding:10px;">
            <button ejs-button id="submitbutton" class="e-btn e-success" type="submit" [disabled]="!skillForm.valid">Submit</button>
            <button ejs-button class="e-btn e-warning" type="reset">Reset</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <link href='https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css' rel='stylesheet' />
</div>
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: 250px;
    margin: 0 auto;
}
.outerbox{
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
  margin:0 auto;
  height:auto;
  width: 300px;
}
.footer{
    text-align: center;
}
#submitbutton{
    margin-right:20px;
}
Previous
Next