chore(demo): InputDateTime simplify example

taiga-family · Nov 27, 2024 · b23af89 · b23af89
1 parent 8629cfb
commit b23af89
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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>