fix(kit): InputDateTime validators not triggered when value change (#…

…9846)

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

@@ -241,4 +241,38 @@ 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();
+
+            // 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/6/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"
+></tui-error>
+
+<p>Form value:</p>
+
+<pre><code>{{ control.value | json }}</code></pre>

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

@@ -0,0 +1,28 @@
+import {Component} from '@angular/core';
+import {
+    AbstractControl,
+    FormControl,
+    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 control = new FormControl(
+        [new TuiDay(2017, 2, 15), null],
+        completeDateTimeValidator,
+    );
+}

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),

projects/demo/src/modules/components/input-date-time/input-date-time.module.ts

@@ -5,23 +5,27 @@ 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';
 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],
 })

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

@@ -106,6 +106,14 @@ <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"
+        >
+            <tui-input-date-time-example-6></tui-input-date-time-example-6>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

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);
         }