TimePicker is a form component and validation is playing vital role in forms to get the valid data. Here to showcase the TimePicker with form validations we have used the reactive form.
For more details about Reactive Forms refer: https://angular.io/guide/reactive-forms
.
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.
You can declare the formControlName
to TimePicker 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.
import { Component, ViewChild, OnInit, ElementRef, Inject } from '@angular/core';
import { TimePickerComponent } from '@syncfusion/ej2-angular-calendars';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app/template.html'
})
export class AppComponent implements OnInit {
@ViewChild('ejTimePicker') ejTimePicker: TimePickerComponent;
public targetElement: HTMLElement;
public placeholder: String = 'Select a time';
skillForm: FormGroup;
build: FormBuilder;
constructor(@Inject(FormBuilder) private builder: FormBuilder) {
this.build = builder;
this.createForm();
}
createForm() {
this.skillForm = this.build.group({
timepicker: ['', Validators.required],
username: ['', Validators.required],
usermail: ['', Validators.email],
});
}
get username() {
return this.skillForm.get('username');
}
get timepicker() {
return this.skillForm.get('timepicker');
}
get usermail() {
return this.skillForm.get('usermail');
}
onSubmit() {
alert("Form Submitted!");
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { TimePickerModule } from '@syncfusion/ej2-angular-calendars';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,FormsModule, ReactiveFormsModule, TimePickerModule, ButtonModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
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 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-timepicker #ejTimePicker formControlName="timepicker" name="timepicker" [placeholder]='placeholder'
floatLabelType='Auto'>
</ejs-timepicker>
<div *ngIf="timepicker.invalid && (timepicker.dirty||timepicker.touched)" class="alert alert-danger">
Enter time in "hh:mm a" format.
</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>
#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;
}
.footer{
text-align: center;
}
#submitbutton{
margin-right:20px;
}