Enable form field level touched property when control is touched.

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)"></ngx-timepicker-time-control>
     <span class="ngx-timepicker__time-colon ngx-timepicker__control--second">:</span>
@@ -19,11 +20,13 @@
         [timeUnit]="timeUnit.MINUTE"
         [disabled]="disabled"
         [isDefaultTimeSet]="isDefaultTime"
+        (onTouched)="onTouched()"
         (timeChanged)="changeMinute($event)"></ngx-timepicker-time-control>
     <ngx-timepicker-period-selector
         class="ngx-timepicker__control--forth"
         [selectedPeriod]="period$|async"
         [disabled]="disabled"
+        (onTouched)="onTouched()"
         (periodSelected)="changePeriod($event)"
         *ngIf="format !== 24"></ngx-timepicker-period-selector>
     <ngx-material-timepicker-toggle
@@ -44,6 +47,7 @@
     [format]="format"
     [cancelBtnTmpl]="cancelBtnTmpl"
     [confirmBtnTmpl]="confirmBtnTmpl"
+    (closed)="onTouched()"
     (timeSet)="onTimeSet($event)" #timepicker></ngx-material-timepicker>
 
 <ng-template #defaultIcon>

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 {

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<TimePeriod>();
+    @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();
     }
 }

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<number>();
+    @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);
         }