sample(timepicker): update timepicker sample

Author: didimmova

src/app/time-picker/time-picker.sample.html

@@ -8,7 +8,6 @@ <h4 class="sample-title">Angular Time Picker with Reactive Form</h4>
                     formControlName="timePicker"
                     [mode]="properties.mode"
                     [type]="properties.type"
-                    [value]="properties.value"
                     [inputFormat]="properties.inputFormat"
                     [displayFormat]="properties.displayFormat"
                     [required]="properties.required"

src/app/time-picker/time-picker.sample.ts

@@ -2,9 +2,6 @@ import { Component, DestroyRef, inject, TemplateRef, ViewChild, OnInit } from '@
 import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, Validators } from '@angular/forms';
 import {
     IgxTimePickerComponent,
-    IgxInputDirective,
-    AutoPositionStrategy,
-    OverlaySettings,
     DatePart,
     IgxHintDirective,
     IgxButtonDirective,
@@ -50,9 +47,6 @@ export class TimePickerSampleComponent implements OnInit {
     @ViewChild('tp', { read: IgxTimePickerComponent, static: true })
     public tp: IgxTimePickerComponent;
 
-    @ViewChild('target')
-    public target: IgxInputDirective;
-
     @ViewChild('customControls', { static: true })
     public customControlsTemplate!: TemplateRef<any>;
 
@@ -62,7 +56,6 @@ export class TimePickerSampleComponent implements OnInit {
     public hasHint = false;
 
     public itemsDelta = { hours: 1, minutes: 15, seconds: 20 };
-    public format = 'hh:mm:ss:SS a';
     public spinLoop = true;
     public datePart = DatePart.Hours;
 
@@ -73,14 +66,6 @@ export class TimePickerSampleComponent implements OnInit {
     public val = '08:30:00';
     public today = new Date(Date.now());
 
-    public isRequired = true;
-
-    public myOverlaySettings: OverlaySettings = {
-        modal: false,
-        closeOnOutsideClick: true,
-        positionStrategy: new AutoPositionStrategy()
-    };
-
     public panelConfig: PropertyPanelConfig = {
         size: {
             control: {
@@ -160,8 +145,9 @@ export class TimePickerSampleComponent implements OnInit {
         })
     ) as Properties;
 
+    // FormControl owns the time picker value
     public reactiveForm = this.fb.group({
-        timePicker: [this.properties?.value || ''],
+        timePicker: [null],
     });
 
     constructor() {
@@ -171,10 +157,7 @@ export class TimePickerSampleComponent implements OnInit {
             this.propertyChangeService.propertyChanges.subscribe(
                 (properties) => {
                     this.properties = properties;
-                    this.reactiveForm.patchValue({
-                        timePicker: properties?.value || ''
-                    });
-                    this.updateRequiredValidator();
+                    this.syncFormControlFromProperties();
                 }
             );
 
@@ -187,19 +170,55 @@ export class TimePickerSampleComponent implements OnInit {
         );
     }
 
-    private updateRequiredValidator(): void {
+    /**
+     * Syncs the reactive form control with the properties panel:
+     * - programmatic value updates
+     * - required validator
+     * - disabled state
+     *
+     * All done in a way that does NOT mark the control dirty/touched.
+     */
+    private syncFormControlFromProperties(): void {
         const control = this.reactiveForm.get('timePicker');
-        if (control) {
-            control.setValidators(this.properties?.required ? Validators.required : null);
-            control.updateValueAndValidity();
+        if (!control) {
+            return;
         }
-    }
 
-    public change() {
-        this.isRequired = !this.isRequired;
-    }
+        // 1) Programmatic value update (from properties.value)
+        // This does NOT mark the control dirty/touched.
+        if ('value' in this.properties) {
+            const newValue = this.properties.value ?? null;
+            const currentValue = control.value;
+
+            // Shallow equality check to avoid unnecessary writes
+            const sameValue =
+                (newValue === currentValue) ||
+                (newValue instanceof Date &&
+                    currentValue instanceof Date &&
+                    newValue.getTime() === currentValue.getTime());
+
+            if (!sameValue) {
+                control.setValue(newValue, { emitEvent: false });
+            }
+        }
+
+        // 2) Required validator - set without triggering validation
+        const currentValidators = control.validator;
+        const newValidators = this.properties?.required ? Validators.required : null;
 
-    public valueChanged(event) {
+        // Only update validators if they actually changed
+        if (currentValidators !== newValidators) {
+            control.setValidators(newValidators);
+            // Don't call updateValueAndValidity - let natural form lifecycle handle validation
+        }
+
+        // 3) Disabled state
+        if (this.properties?.disabled) {
+            control.disable({ emitEvent: false });
+        } else {
+            control.enable({ emitEvent: false });
+        }
+    }    public valueChanged(event) {
         console.log(event);
     }