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); }