From 8629cfb39d19baa1714a66305807c89eca75edca Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Tue, 26 Nov 2024 17:58:07 +0300
Subject: [PATCH 1/2] fix(kit): `InputDateTime` validators not triggered when
 value change

---
 .../input-date-time/input-date-time.spec.ts   | 33 +++++++++++++++++++
 .../input-date-time/examples/6/index.html     | 11 +++++++
 .../input-date-time/examples/6/index.ts       | 31 +++++++++++++++++
 .../input-date-time.component.ts              |  5 +++
 .../input-date-time/input-date-time.module.ts |  7 +++-
 .../input-date-time.template.html             | 15 +++++++++
 .../input-date-time.component.ts              |  4 +++
 7 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 projects/demo/src/modules/components/input-date-time/examples/6/index.html
 create mode 100644 projects/demo/src/modules/components/input-date-time/examples/6/index.ts

diff --git a/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts b/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts
index 606277db162b..62ddb2371253 100644
--- a/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts
+++ b/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts
@@ -241,4 +241,37 @@ describe('InputDateTime', () => {
             });
         });
     });
+
+    test.describe('Examples', () => {
+        let example!: Locator;
+        let documentationPage!: TuiDocumentationPagePO;
+        let inputDateTime!: TuiInputDateTimePO;
+
+        test.beforeEach(async ({page}) => {
+            await tuiGoto(page, 'components/input-date-time');
+
+            documentationPage = new TuiDocumentationPagePO(page);
+            example = documentationPage.apiPageExample;
+
+            inputDateTime = new TuiInputDateTimePO(
+                example.locator('tui-input-date-time'),
+            );
+        });
+
+        test('With validator: enter incomplete date -> validator error', async () => {
+            example = documentationPage.getExample('#with-validator');
+            inputDateTime = new TuiInputDateTimePO(
+                example.locator('tui-input-date-time'),
+            );
+
+            await inputDateTime.textfield.clear();
+            await inputDateTime.textfield.fill('11');
+            await inputDateTime.textfield.blur();
+
+            await expect(example).toHaveScreenshot(
+                '04-input-data-time-with-validator.png',
+                {animations: 'allow'},
+            );
+        });
+    });
 });
diff --git a/projects/demo/src/modules/components/input-date-time/examples/6/index.html b/projects/demo/src/modules/components/input-date-time/examples/6/index.html
new file mode 100644
index 000000000000..46977781cce0
--- /dev/null
+++ b/projects/demo/src/modules/components/input-date-time/examples/6/index.html
@@ -0,0 +1,11 @@
+<form [formGroup]="testForm">
+    <tui-input-date-time formControlName="testValue">Choose date and time</tui-input-date-time>
+    <tui-error
+        formControlName="testValue"
+        [error]="[] | tuiFieldError | async"
+    ></tui-error>
+
+    <p>Form value:</p>
+
+    <pre><code>{{ testForm.value | json }}</code></pre>
+</form>
diff --git a/projects/demo/src/modules/components/input-date-time/examples/6/index.ts b/projects/demo/src/modules/components/input-date-time/examples/6/index.ts
new file mode 100644
index 000000000000..99ab1976d76e
--- /dev/null
+++ b/projects/demo/src/modules/components/input-date-time/examples/6/index.ts
@@ -0,0 +1,31 @@
+import {Component} from '@angular/core';
+import {
+    AbstractControl,
+    FormControl,
+    FormGroup,
+    ValidationErrors,
+    ValidatorFn,
+} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDay} from '@taiga-ui/cdk';
+
+const completeDateTimeValidator: ValidatorFn = (
+    control: AbstractControl,
+): ValidationErrors | null =>
+    control.value.every(Boolean) ? null : {incompleteDateTime: true};
+
+@Component({
+    selector: 'tui-input-date-time-example-6',
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export class TuiInputDateTimeExample6 {
+    readonly testForm = new FormGroup({
+        testValue: new FormControl(
+            [new TuiDay(2017, 2, 15), null],
+            completeDateTimeValidator,
+        ),
+    });
+}
diff --git a/projects/demo/src/modules/components/input-date-time/input-date-time.component.ts b/projects/demo/src/modules/components/input-date-time/input-date-time.component.ts
index 6af0f10bc26f..73b7cdc26e33 100644
--- a/projects/demo/src/modules/components/input-date-time/input-date-time.component.ts
+++ b/projects/demo/src/modules/components/input-date-time/input-date-time.component.ts
@@ -61,6 +61,11 @@ export class ExampleTuiInputDateTimeComponent extends AbstractExampleTuiControl
         HTML: import('./examples/5/index.html?raw'),
     };
 
+    readonly example6: TuiDocExample = {
+        TypeScript: import('./examples/6/index.ts?raw'),
+        HTML: import('./examples/6/index.html?raw'),
+    };
+
     readonly minVariants: ReadonlyArray<TuiDay | [TuiDay, TuiTime]> = [
         TUI_FIRST_DAY,
         new TuiDay(2017, 2, 5),
diff --git a/projects/demo/src/modules/components/input-date-time/input-date-time.module.ts b/projects/demo/src/modules/components/input-date-time/input-date-time.module.ts
index a0e1452c295f..aea71eb6f998 100644
--- a/projects/demo/src/modules/components/input-date-time/input-date-time.module.ts
+++ b/projects/demo/src/modules/components/input-date-time/input-date-time.module.ts
@@ -5,12 +5,13 @@ import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
 import {
     TuiDropdownModule,
+    TuiErrorModule,
     TuiHintModule,
     TuiLinkModule,
     TuiNotificationModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
-import {TuiInputDateTimeModule} from '@taiga-ui/kit';
+import {TuiFieldErrorPipeModule, TuiInputDateTimeModule} from '@taiga-ui/kit';
 
 import {InheritedDocumentationModule} from '../abstract/inherited-documentation/inherited-documentation.module';
 import {TuiInputDateTimeExample1} from './examples/1';
@@ -18,10 +19,13 @@ import {TuiInputDateTimeExample2} from './examples/2';
 import {TuiInputDateTimeExample3} from './examples/3';
 import {TuiInputDateTimeExample4} from './examples/4';
 import {TuiInputDateTimeExample5} from './examples/5';
+import {TuiInputDateTimeExample6} from './examples/6';
 import {ExampleTuiInputDateTimeComponent} from './input-date-time.component';
 
 @NgModule({
     imports: [
+        TuiErrorModule,
+        TuiFieldErrorPipeModule,
         TuiAddonDocModule,
         InheritedDocumentationModule,
         ReactiveFormsModule,
@@ -42,6 +46,7 @@ import {ExampleTuiInputDateTimeComponent} from './input-date-time.component';
         TuiInputDateTimeExample3,
         TuiInputDateTimeExample4,
         TuiInputDateTimeExample5,
+        TuiInputDateTimeExample6,
     ],
     exports: [ExampleTuiInputDateTimeComponent],
 })
diff --git a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html b/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
index bb2093ec1599..d0ac80bd2b65 100644
--- a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
+++ b/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
@@ -106,6 +106,21 @@ <h3>DI-tokens for input-configurations:</h3>
             </tui-notification>
             <tui-input-date-time-example-5></tui-input-date-time-example-5>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="with-validator"
+            heading="With validator"
+            [content]="example6"
+            [description]="withValidatorDescription"
+        >
+            <tui-input-date-time-example-6></tui-input-date-time-example-6>
+
+            <ng-template #withValidatorDescription>
+                Create custom validator function to verify input value. Custom
+                <code>completeDateTimeValidator</code>
+                using to check if data is complete
+            </ng-template>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>
diff --git a/projects/kit/components/input-date-time/input-date-time.component.ts b/projects/kit/components/input-date-time/input-date-time.component.ts
index 54fffeb2eb25..ba1e9bb147db 100644
--- a/projects/kit/components/input-date-time/input-date-time.component.ts
+++ b/projects/kit/components/input-date-time/input-date-time.component.ts
@@ -257,6 +257,10 @@ export class TuiInputDateTimeComponent
     }
 
     onValueChange(value: string): void {
+        if (this.control) {
+            this.control.updateValueAndValidity({emitEvent: false});
+        }
+
         if (!value) {
             this.onOpenChange(true);
         }

From b23af893d1232bb8e24e394fa0e7de2eb225b849 Mon Sep 17 00:00:00 2001
From: mdlufy <german.panov.2018@mail.ru>
Date: Wed, 27 Nov 2024 15:58:41 +0300
Subject: [PATCH 2/2] chore(demo): `InputDateTime` simplify example

---
 .../kit/input-date-time/input-date-time.spec.ts  |  1 +
 .../input-date-time/examples/6/index.html        | 16 +++++++---------
 .../input-date-time/examples/6/index.ts          | 11 ++++-------
 .../input-date-time.template.html                |  7 -------
 4 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts b/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts
index 62ddb2371253..61125f5f7e22 100644
--- a/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts
+++ b/projects/demo-playwright/tests/kit/input-date-time/input-date-time.spec.ts
@@ -268,6 +268,7 @@ describe('InputDateTime', () => {
             await inputDateTime.textfield.fill('11');
             await inputDateTime.textfield.blur();
 
+            // allow animations to capture tui-error validation message on screenshot
             await expect(example).toHaveScreenshot(
                 '04-input-data-time-with-validator.png',
                 {animations: 'allow'},
diff --git a/projects/demo/src/modules/components/input-date-time/examples/6/index.html b/projects/demo/src/modules/components/input-date-time/examples/6/index.html
index 46977781cce0..a2c088c3aa5a 100644
--- a/projects/demo/src/modules/components/input-date-time/examples/6/index.html
+++ b/projects/demo/src/modules/components/input-date-time/examples/6/index.html
@@ -1,11 +1,9 @@
-<form [formGroup]="testForm">
-    <tui-input-date-time formControlName="testValue">Choose date and time</tui-input-date-time>
-    <tui-error
-        formControlName="testValue"
-        [error]="[] | tuiFieldError | async"
-    ></tui-error>
+<tui-input-date-time [formControl]="control">Choose date and time</tui-input-date-time>
+<tui-error
+    [error]="[] | tuiFieldError | async"
+    [formControl]="control"
+></tui-error>
 
-    <p>Form value:</p>
+<p>Form value:</p>
 
-    <pre><code>{{ testForm.value | json }}</code></pre>
-</form>
+<pre><code>{{ control.value | json }}</code></pre>
diff --git a/projects/demo/src/modules/components/input-date-time/examples/6/index.ts b/projects/demo/src/modules/components/input-date-time/examples/6/index.ts
index 99ab1976d76e..c6da8c6da6f4 100644
--- a/projects/demo/src/modules/components/input-date-time/examples/6/index.ts
+++ b/projects/demo/src/modules/components/input-date-time/examples/6/index.ts
@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 import {
     AbstractControl,
     FormControl,
-    FormGroup,
     ValidationErrors,
     ValidatorFn,
 } from '@angular/forms';
@@ -22,10 +21,8 @@ const completeDateTimeValidator: ValidatorFn = (
     changeDetection,
 })
 export class TuiInputDateTimeExample6 {
-    readonly testForm = new FormGroup({
-        testValue: new FormControl(
-            [new TuiDay(2017, 2, 15), null],
-            completeDateTimeValidator,
-        ),
-    });
+    readonly control = new FormControl(
+        [new TuiDay(2017, 2, 15), null],
+        completeDateTimeValidator,
+    );
 }
diff --git a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html b/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
index d0ac80bd2b65..65d9054a9860 100644
--- a/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
+++ b/projects/demo/src/modules/components/input-date-time/input-date-time.template.html
@@ -111,15 +111,8 @@ <h3>DI-tokens for input-configurations:</h3>
             id="with-validator"
             heading="With validator"
             [content]="example6"
-            [description]="withValidatorDescription"
         >
             <tui-input-date-time-example-6></tui-input-date-time-example-6>
-
-            <ng-template #withValidatorDescription>
-                Create custom validator function to verify input value. Custom
-                <code>completeDateTimeValidator</code>
-                using to check if data is complete
-            </ng-template>
         </tui-doc-example>
     </ng-template>