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.
For more details about template-driven Forms refer to:https://angular.io/guide/forms#template-driven-forms.
name
attribute to DateRangePicker element which will be used to identify the
form element. To register an DateRangePicker element to ngForm, give the ngModel to it
so the FormsModule will automatically detect the DateRangePicker as a form element.
After that, the DateRangePicker value will be selected based on the ngModel value.The following example demonstrates template driven forms with DateRangePicker component.
import { Component,ViewChild, ViewEncapsulation, Inject } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { DateRangePickerComponent } from '@syncfusion/ej2-angular-calendars';
class User {
constructor() {
public range: Date[]
}
}
@Component({
selector: 'app-root',
templateUrl: './app/template.html'
})
export class DefaultDateRangePickerComponent {
user: User;
ngOnInit() {
this.user = new User(null);
}
onSubmit(userForm) {
(userForm.valid) ? alert("submitted"): alert("form is invalid");
}
}
import { DefaultDateRangePickerComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars';
@NgModule({
imports: [ FormsModule, ReactiveFormsModule, BrowserModule, DateRangePickerModule],
declarations: [DefaultDateRangePickerComponent],
bootstrap: [DefaultDateRangePickerComponent]
})
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-daterangepicker id="daterangepicker" name="date" [(ngModel)]="user.date" #date="ngModel" width="350px" required></ejs-daterangepicker>
<div *ngIf="userForm.invalid && (userForm.dirty || userForm.touched)" class="alert alert-danger formerror">
Valid date 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.date[0] | date:"dd/MM/yyyy"}} - {{ user.date[1] | date:"dd/MM/yyyy"}} </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, .buttons {
width:350px;
}
.buttons, #wrapper,#loader{
margin:0 auto;
text-align: center;
}