fix(legacy): InputDateTime validators not triggered when value chan…

…ge (#9838)

projects/demo-playwright/tests/legacy/input-date-time/input-date-time.pw.spec.ts

@@ -310,4 +310,38 @@ test.describe('InputDateTime', () => {
             });
         });
     });
+
+    test.describe('Examples', () => {
+        let example!: Locator;
+        let documentationPage!: TuiDocumentationPagePO;
+        let inputDateTime!: TuiInputDateTimePO;
+
+        test.beforeEach(async ({page}) => {
+            await tuiGoto(page, DemoRoute.InputDateTime);
+
+            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();
+
+            // allow animations to capture tui-error validation message on screenshot
+            await expect(example).toHaveScreenshot(
+                '04-input-data-time-with-validator.png',
+                {animations: 'allow'},
+            );
+        });
+    });
 });

projects/demo/src/modules/components/input-date-time/examples/7/index.html

@@ -0,0 +1,9 @@
+<tui-input-date-time [formControl]="control">Choose date and time</tui-input-date-time>
+<tui-error
+    [error]="[] | tuiFieldError | async"
+    [formControl]="control"
+/>
+
+<p>Form value:</p>
+
+<pre><code>{{ control.value | json }}</code></pre>

projects/demo/src/modules/components/input-date-time/examples/7/index.ts

@@ -0,0 +1,36 @@
+import {AsyncPipe, JsonPipe} from '@angular/common';
+import {Component} from '@angular/core';
+import type {AbstractControl, ValidationErrors, ValidatorFn} from '@angular/forms';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiDay} from '@taiga-ui/cdk';
+import {TuiError} from '@taiga-ui/core';
+import {TuiFieldErrorPipe} from '@taiga-ui/kit';
+import {TuiInputDateTimeModule} from '@taiga-ui/legacy';
+
+const completeDateTimeValidator: ValidatorFn = (
+    control: AbstractControl,
+): ValidationErrors | null =>
+    control.value.every(Boolean) ? null : {incompleteDateTime: true};
+
+@Component({
+    standalone: true,
+    imports: [
+        AsyncPipe,
+        JsonPipe,
+        ReactiveFormsModule,
+        TuiError,
+        TuiFieldErrorPipe,
+        TuiInputDateTimeModule,
+    ],
+    templateUrl: './index.html',
+    encapsulation,
+    changeDetection,
+})
+export default class Example {
+    protected readonly control = new FormControl(
+        [new TuiDay(2017, 2, 15), null],
+        completeDateTimeValidator,
+    );
+}

projects/demo/src/modules/components/input-date-time/index.html

@@ -115,6 +115,13 @@ <h3>DI-tokens for input-configurations:</h3>
                 is 12-hour time format with meridiem part
             </ng-template>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="with-validator"
+            heading="With validator"
+            [component]="7 | tuiComponent"
+            [content]="7 | tuiExample: 'html,ts'"
+        />
     </ng-template>
 
     <ng-template pageTab>

projects/legacy/components/input-date-time/input-date-time.component.ts

@@ -169,6 +169,10 @@ export class TuiInputDateTimeComponent
     }
 
     public onValueChange(value: string): void {
+        if (this.control) {
+            this.control.updateValueAndValidity({emitEvent: false});
+        }
+
         if (!value) {
             this.onOpenChange(true);
         }