diff --git a/src/app/material-timepicker/components/timepicker-field/ngx-timepicker-field.component.html b/src/app/material-timepicker/components/timepicker-field/ngx-timepicker-field.component.html
index d12cbdfe..eaad4dd0 100644
--- a/src/app/material-timepicker/components/timepicker-field/ngx-timepicker-field.component.html
+++ b/src/app/material-timepicker/components/timepicker-field/ngx-timepicker-field.component.html
@@ -7,6 +7,7 @@
[max]="maxHour"
[timeUnit]="timeUnit.HOUR"
[disabled]="disabled"
+ (onTouched)="onTouched()"
[isDefaultTimeSet]="isDefaultTime"
(timeChanged)="changeHour($event)">
:
@@ -19,11 +20,13 @@
[timeUnit]="timeUnit.MINUTE"
[disabled]="disabled"
[isDefaultTimeSet]="isDefaultTime"
+ (onTouched)="onTouched()"
(timeChanged)="changeMinute($event)">
diff --git a/src/app/material-timepicker/components/timepicker-field/ngx-timepicker-field.component.ts b/src/app/material-timepicker/components/timepicker-field/ngx-timepicker-field.component.ts
index 727b684b..f697dbb6 100644
--- a/src/app/material-timepicker/components/timepicker-field/ngx-timepicker-field.component.ts
+++ b/src/app/material-timepicker/components/timepicker-field/ngx-timepicker-field.component.ts
@@ -90,6 +90,8 @@ export class NgxTimepickerFieldComponent implements OnInit, OnDestroy, ControlVa
private onChange: (value: string) => void = () => {
}
+ private onTouched: () => void = () => {}
+
constructor(private timepickerService: NgxMaterialTimepickerService,
@Inject(TIME_LOCALE) private locale: string) {
}
@@ -112,6 +114,7 @@ export class NgxTimepickerFieldComponent implements OnInit, OnDestroy, ControlVa
}
registerOnTouched(fn: any): void {
+ this.onTouched = fn;
}
registerOnChange(fn: any): void {
diff --git a/src/app/material-timepicker/components/timepicker-field/timepicker-period-selector/ngx-timepicker-period-selector.component.ts b/src/app/material-timepicker/components/timepicker-field/timepicker-period-selector/ngx-timepicker-period-selector.component.ts
index c3824f28..38922cfc 100644
--- a/src/app/material-timepicker/components/timepicker-field/timepicker-period-selector/ngx-timepicker-period-selector.component.ts
+++ b/src/app/material-timepicker/components/timepicker-field/timepicker-period-selector/ngx-timepicker-period-selector.component.ts
@@ -35,6 +35,7 @@ export class NgxTimepickerPeriodSelectorComponent {
}
@Output() periodSelected = new EventEmitter();
+ @Output() onTouched = new EventEmitter();
period = TimePeriod;
meridiems = Info.meridiems({locale: this.locale});
@@ -51,10 +52,11 @@ export class NgxTimepickerPeriodSelectorComponent {
select(period: TimePeriod): void {
this.periodSelected.next(period);
- this.isOpened = false;
+ this.backdropClick();
}
backdropClick(): void {
this.isOpened = false;
+ this.onTouched.emit();
}
}
diff --git a/src/app/material-timepicker/components/timepicker-field/timepicker-time-control/ngx-timepicker-time-control.component.ts b/src/app/material-timepicker/components/timepicker-field/timepicker-time-control/ngx-timepicker-time-control.component.ts
index 75b5d6ce..c5742104 100644
--- a/src/app/material-timepicker/components/timepicker-field/timepicker-time-control/ngx-timepicker-time-control.component.ts
+++ b/src/app/material-timepicker/components/timepicker-field/timepicker-time-control/ngx-timepicker-time-control.component.ts
@@ -22,6 +22,7 @@ export class NgxTimepickerTimeControlComponent implements OnChanges {
@Input() isDefaultTimeSet: boolean;
@Output() timeChanged = new EventEmitter();
+ @Output() onTouched = new EventEmitter();
isFocused: boolean;
@@ -90,7 +91,7 @@ export class NgxTimepickerTimeControlComponent implements OnChanges {
onBlur(): void {
this.isFocused = false;
-
+ this.onTouched.emit();
if (this.previousTime !== this.time) {
this.changeTimeIfValid(+this.time);
}