From 13cb5be6e484f55f8ba35e1e0da48a7b27f920a1 Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Sun, 29 Dec 2019 11:57:56 +0530
Subject: [PATCH 1/2] Enable form field level touched property when control is
 touched.

---
 .../timepicker-field/ngx-timepicker-field.component.html     | 5 +++++
 .../timepicker-field/ngx-timepicker-field.component.ts       | 3 +++
 2 files changed, 8 insertions(+)

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..4df81802 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"
+        (click)="onTouched()"
         [isDefaultTimeSet]="isDefaultTime"
         (timeChanged)="changeHour($event)"></ngx-timepicker-time-control>
     <span class="ngx-timepicker__time-colon ngx-timepicker__control--second">:</span>
@@ -19,17 +20,20 @@
         [timeUnit]="timeUnit.MINUTE"
         [disabled]="disabled"
         [isDefaultTimeSet]="isDefaultTime"
+        (click)="onTouched()"
         (timeChanged)="changeMinute($event)"></ngx-timepicker-time-control>
     <ngx-timepicker-period-selector
         class="ngx-timepicker__control--forth"
         [selectedPeriod]="period$|async"
         [disabled]="disabled"
+        (click)="onTouched()"
         (periodSelected)="changePeriod($event)"
         *ngIf="format !== 24"></ngx-timepicker-period-selector>
     <ngx-material-timepicker-toggle
         class="ngx-timepicker__toggle"
         *ngIf="!controlOnly"
         [ngClass]="{'ngx-timepicker__toggle--left': buttonAlign === 'left'}"
+        (click)="onTouched()"
         [for]="timepicker"
         [disabled]="disabled">
         <span ngxMaterialTimepickerToggleIcon>
@@ -44,6 +48,7 @@
     [format]="format"
     [cancelBtnTmpl]="cancelBtnTmpl"
     [confirmBtnTmpl]="confirmBtnTmpl"
+    (click)="onTouched()"
     (timeSet)="onTimeSet($event)" #timepicker></ngx-material-timepicker>
 
 <ng-template #defaultIcon>
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 {

From b6c726365ea8c4cb10641eea88fae02e9b20d2f3 Mon Sep 17 00:00:00 2001
From: Pankaj Parkar <parkarpankaj3@gmail.com>
Date: Sun, 29 Dec 2019 13:06:26 +0530
Subject: [PATCH 2/2] Improved the implmentation of onTouched behavior, it
 should trigger on blur of input.

---
 .../timepicker-field/ngx-timepicker-field.component.html | 9 ++++-----
 .../ngx-timepicker-period-selector.component.ts          | 4 +++-
 .../ngx-timepicker-time-control.component.ts             | 3 ++-
 3 files changed, 9 insertions(+), 7 deletions(-)

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 4df81802..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,7 +7,7 @@
         [max]="maxHour"
         [timeUnit]="timeUnit.HOUR"
         [disabled]="disabled"
-        (click)="onTouched()"
+        (onTouched)="onTouched()"
         [isDefaultTimeSet]="isDefaultTime"
         (timeChanged)="changeHour($event)"></ngx-timepicker-time-control>
     <span class="ngx-timepicker__time-colon ngx-timepicker__control--second">:</span>
@@ -20,20 +20,19 @@
         [timeUnit]="timeUnit.MINUTE"
         [disabled]="disabled"
         [isDefaultTimeSet]="isDefaultTime"
-        (click)="onTouched()"
+        (onTouched)="onTouched()"
         (timeChanged)="changeMinute($event)"></ngx-timepicker-time-control>
     <ngx-timepicker-period-selector
         class="ngx-timepicker__control--forth"
         [selectedPeriod]="period$|async"
         [disabled]="disabled"
-        (click)="onTouched()"
+        (onTouched)="onTouched()"
         (periodSelected)="changePeriod($event)"
         *ngIf="format !== 24"></ngx-timepicker-period-selector>
     <ngx-material-timepicker-toggle
         class="ngx-timepicker__toggle"
         *ngIf="!controlOnly"
         [ngClass]="{'ngx-timepicker__toggle--left': buttonAlign === 'left'}"
-        (click)="onTouched()"
         [for]="timepicker"
         [disabled]="disabled">
         <span ngxMaterialTimepickerToggleIcon>
@@ -48,7 +47,7 @@
     [format]="format"
     [cancelBtnTmpl]="cancelBtnTmpl"
     [confirmBtnTmpl]="confirmBtnTmpl"
-    (click)="onTouched()"
+    (closed)="onTouched()"
     (timeSet)="onTimeSet($event)" #timepicker></ngx-material-timepicker>
 
 <ng-template #defaultIcon>
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<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();
     }
 }
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<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);
         }