issue453: fix issue where hours and minutes fields are not updated when "enableKeyboardInput" is set to true

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file
 
+## 13.1.2 (2024-01-02)
+
+### Fixes
+
+* fix(ngx-material-timepicker-component): fix issue where hours and minutes fields are not updated when "enableKeyboardInput" is set to true,
+  fixes [(#453)](https://github.com/Agranom/ngx-material-timepicker/issues/453)
+
 ## 13.1.1 (2023-07-11)
 
 ### Fixes

package.json

@@ -1,7 +1,7 @@
 {
     "name": "ngx-material-timepicker",
     "description": "Handy material design timepicker for angular",
-    "version": "13.1.1",
+    "version": "13.1.2",
     "license": "MIT",
     "author": "Vitalii Boiko <[email protected]>",
     "keywords": [

src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.spec.ts

@@ -28,6 +28,7 @@ describe('NgxMaterialTimepickerDialControlComponent', () => {
         }).createComponent(NgxMaterialTimepickerDialControlComponent);
 
         component = fixture.componentInstance;
+        component.timeList = [];
     });
 
     it('should set current time to previous time, change time unit and emit focus event', waitForAsync(() => {
@@ -151,11 +152,19 @@ describe('NgxMaterialTimepickerDialControlComponent', () => {
         it('should set value to form control', () => {
             component.time = '10';
             component.ngOnInit();
+            component.ngOnChanges();
             const timeControl = component.timeControl;
             expect(timeControl.value).toBe('10');
             expect(timeControl.enabled).toBeTruthy();
         });
 
+        it('should not set value to form control if form control is not available yet', () => {
+            component.time = '10';
+            component.ngOnChanges();
+            const timeControl = component.timeControl;
+            expect(timeControl).toBe(undefined);
+        });
+
         it('should disable form control', () => {
             component.disabled = true;
             component.ngOnInit();

src/app/material-timepicker/components/timepicker-dial-control/ngx-material-timepicker-dial-control.component.ts

@@ -1,5 +1,5 @@
 /* tslint:disable:triple-equals */
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, ElementRef, EventEmitter, Input, OnInit, OnChanges, Output, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { debounceTime, distinctUntilChanged, filter, tap } from 'rxjs/operators';
 import { ClockFaceTime } from '../../models/clock-face-time.interface';
@@ -14,7 +14,7 @@ import { isDigit } from '../../utils/timepicker.utils';
     styleUrls: ['ngx-material-timepicker-dial-control.component.scss'],
     providers: [TimeParserPipe, TimeLocalizerPipe],
 })
-export class NgxMaterialTimepickerDialControlComponent implements OnInit {
+export class NgxMaterialTimepickerDialControlComponent implements OnInit, OnChanges {
 
     previousTime: number | string;
 
@@ -63,6 +63,12 @@ export class NgxMaterialTimepickerDialControlComponent implements OnInit {
 
     }
 
+    ngOnChanges() {
+        if (this.timeControl) {
+            this.timeControl.setValue(this.formatTimeForUI(this.time));
+        }
+    }
+
     saveTimeAndChangeTimeUnit(event: FocusEvent, unit: TimeUnit): void {
         event.preventDefault();
         this.previousTime = this.time;