Having trouble getting help?
Contact Support
Contact Support
Reactive form in Angular Datepicker component
27 Apr 20244 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 theFormGroup
,
FormControl
should be imported to app component.
TheFormGroup
is used to declareformGroupName
for the form and theFormControl
is used to declareformControlName
for form controls. Declare theformControlName
to DatePicker component as usual.
Then, create a value object to theFormGroup
and each value will be the default value of the form control.
The following example demonstrates how to use the reactive forms.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule, ReactiveFormsModule } from '@angular/forms'
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars'
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
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 { FormsModule } from '@angular/forms';
@Component({
imports: [
FormsModule, ReactiveFormsModule, DatePickerModule, ButtonModule
],
standalone: true,
selector: 'app-root',
templateUrl: './template.html'
})
export class AppComponent implements OnInit {
@ViewChild('ejDatePicker') ejDatePicker?: DatePickerComponent;
public targetElement?: HTMLElement;
public placeholder: String = 'Date of Birth';
skillForm?: FormGroup | any;
build: FormBuilder;
constructor(@Inject(FormBuilder) private builder: FormBuilder) {
this.build = builder;
this.createForm();
}
ngOnInit(): void {
throw new Error('Method not implemented.');
}
createForm() {
this.skillForm = this.build.group({
datepicker: ['', Validators.required],
username: ['', Validators.required],
usermail: ['', Validators.email],
});
}
get username() {
return (this.skillForm as FormGroup<any> | any).get('username');
}
get datepicker() {
return (this.skillForm as FormGroup<any> | any).get('datepicker');
}
get usermail() {
return (this.skillForm as FormGroup<any> | any).get('usermail');
}
onSubmit() {
alert("Form Submitted!");
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));