feat(kit): add tuiValidationError

taiga-family · Oct 4, 2024 · b5ba7d6 · b5ba7d6
1 parent c0644f4
commit b5ba7d6
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 45 deletions.
diff --git a/projects/demo/src/modules/components/textarea/examples/4/index.ts b/projects/demo/src/modules/components/textarea/examples/4/index.ts
@@ -6,7 +6,7 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {tuiMarkControlAsTouchedAndValidate} from '@taiga-ui/cdk';
 import {TuiError, TuiHint, TuiLabel} from '@taiga-ui/core';
-import {TUI_VALIDATION_ERRORS, TuiFieldErrorPipe} from '@taiga-ui/kit';
+import {TuiFieldErrorPipe, tuiValidationError} from '@taiga-ui/kit';
 import {TuiTextareaModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 
 const LONG_TEXT_EXAMPLE = `
@@ -36,13 +36,10 @@ export function maxLengthMessageFactory(context: {requiredLength: string}): stri
     encapsulation,
     changeDetection,
     providers: [
-        {
-            provide: TUI_VALIDATION_ERRORS,
-            useValue: {
-                required: 'Enter this!',
-                maxlength: maxLengthMessageFactory,
-            },
-        },
+        tuiValidationError({
+            required: 'Enter this!',
+            maxlength: maxLengthMessageFactory,
+        }),
     ],
 })
 export default class Example implements AfterViewInit {

diff --git a/projects/demo/src/modules/pipes/field-error/examples/2/index.ts b/projects/demo/src/modules/pipes/field-error/examples/2/index.ts
@@ -5,7 +5,7 @@ import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {tuiIsFalsy} from '@taiga-ui/cdk';
 import {TuiError, TuiTextfield} from '@taiga-ui/core';
-import {TUI_VALIDATION_ERRORS, TuiFieldErrorPipe} from '@taiga-ui/kit';
+import {TuiFieldErrorPipe, tuiValidationError} from '@taiga-ui/kit';
 import {
     TuiInputModule,
     TuiInputNumberModule,
@@ -29,22 +29,19 @@ import {interval, map, of, scan, startWith} from 'rxjs';
     encapsulation,
     changeDetection,
     providers: [
-        {
-            provide: TUI_VALIDATION_ERRORS,
-            useValue: {
-                required: 'Enter this!',
-                email: 'Enter a valid email',
-                maxlength: ({requiredLength}: {requiredLength: string}) =>
-                    `Maximum length — ${requiredLength}`,
-                minlength: ({requiredLength}: {requiredLength: string}) =>
-                    of(`Minimum length — ${requiredLength}`),
-                min: interval(2000).pipe(
-                    scan(tuiIsFalsy, false),
-                    map((val) => (val ? 'Fix please' : 'Min number 3')),
-                    startWith('Min number 3'),
-                ),
-            },
-        },
+        tuiValidationError({
+            required: 'Enter this!',
+            email: 'Enter a valid email',
+            maxlength: ({requiredLength}: {requiredLength: string}) =>
+                `Maximum length — ${requiredLength}`,
+            minlength: ({requiredLength}: {requiredLength: string}) =>
+                of(`Minimum length — ${requiredLength}`),
+            min: interval(2000).pipe(
+                scan(tuiIsFalsy, false),
+                map((val) => (val ? 'Fix please' : 'Min number 3')),
+                startWith('Min number 3'),
+            ),
+        }),
     ],
 })
 export default class Example {

diff --git a/projects/demo/src/modules/pipes/field-error/examples/6/index.ts b/projects/demo/src/modules/pipes/field-error/examples/6/index.ts
@@ -6,7 +6,7 @@ import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiCurrencyPipe} from '@taiga-ui/addon-commerce';
 import {TuiTable} from '@taiga-ui/addon-table';
 import {TuiHintDirective} from '@taiga-ui/core';
-import {TUI_VALIDATION_ERRORS, TuiFieldErrorContentPipe} from '@taiga-ui/kit';
+import {TuiFieldErrorContentPipe, tuiValidationError} from '@taiga-ui/kit';
 import {TuiInputNumberModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
 
 @Component({
@@ -26,14 +26,10 @@ import {TuiInputNumberModule, TuiTextfieldControllerModule} from '@taiga-ui/lega
     encapsulation,
     changeDetection,
     providers: [
-        {
-            provide: TUI_VALIDATION_ERRORS,
-            useValue: {
-                required: 'Enter this!',
-                max: (context: {max: number}): string =>
-                    `Too expensive, max ${context.max}`,
-            },
-        },
+        tuiValidationError({
+            required: 'Enter this!',
+            max: (context: {max: number}): string => `Too expensive, max ${context.max}`,
+        }),
     ],
 })
 export default class Example {

diff --git a/projects/kit/pipes/field-error/test/field-error-content-pipe.spec.ts b/projects/kit/pipes/field-error/test/field-error-content-pipe.spec.ts
@@ -5,7 +5,7 @@ import {FormControl, ReactiveFormsModule, Validators} from '@angular/forms';
 import {TuiHintDirective, TuiRoot} from '@taiga-ui/core';
 import {NG_EVENT_PLUGINS} from '@taiga-ui/event-plugins';
 import {TuiFieldErrorContentPipe} from '@taiga-ui/kit/pipes';
-import {TUI_VALIDATION_ERRORS} from '@taiga-ui/kit/tokens';
+import {tuiValidationError} from '@taiga-ui/kit/tokens';
 
 describe('TuiFieldErrorContentPipe', () => {
     const testError = 'testError';
@@ -43,13 +43,10 @@ describe('TuiFieldErrorContentPipe', () => {
         // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
         changeDetection: ChangeDetectionStrategy.Default,
         providers: [
-            {
-                provide: TUI_VALIDATION_ERRORS,
-                useValue: {
-                    min: testError,
-                    max: ({max}: {max: number}) => `error ${max}`,
-                },
-            },
+            tuiValidationError({
+                min: testError,
+                max: ({max}: {max: number}) => `error ${max}`,
+            }),
         ],
     })
     class Test {

diff --git a/projects/kit/tokens/validation-errors.ts b/projects/kit/tokens/validation-errors.ts
@@ -1,10 +1,12 @@
+import type {Provider} from '@angular/core';
 import {tuiCreateToken} from '@taiga-ui/cdk/utils/miscellaneous';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import type {Observable} from 'rxjs';
 
-/**
- * Validation errors
- */
 export const TUI_VALIDATION_ERRORS = tuiCreateToken<
     Record<string, Observable<PolymorpheusContent> | PolymorpheusContent>
 >({});
+
+export const tuiValidationError = (
+    useValue: Record<string, Observable<PolymorpheusContent> | PolymorpheusContent>,
+): Provider => ({provide: TUI_VALIDATION_ERRORS, useValue});