feat(kit): add tuiValidationErrorsProvider (#9342)

taiga-family · Oct 4, 2024 · b22e9c2 · b22e9c2
1 parent 5c2bcdf
commit b22e9c2
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 52 deletions.
diff --git a/projects/demo/src/modules/components/error/index.html b/projects/demo/src/modules/components/error/index.html
@@ -13,7 +13,9 @@
             >
                 <code>tuiFieldError</code>
             </a>
-            .
+            . The idea of
+            <code>tui-error</code>
+            is to show arbitrary messages styled as errors, with height or fade transition.
         </p>
 
         <tui-doc-example

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, tuiValidationErrorsProvider} 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,
-            },
-        },
+        tuiValidationErrorsProvider({
+            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, tuiValidationErrorsProvider} 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'),
-                ),
-            },
-        },
+        tuiValidationErrorsProvider({
+            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, tuiValidationErrorsProvider} 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}`,
-            },
-        },
+        tuiValidationErrorsProvider({
+            required: 'Enter this!',
+            max: (context: {max: number}): string => `Too expensive, max ${context.max}`,
+        }),
     ],
 })
 export default class Example {

diff --git a/projects/demo/src/modules/pipes/field-error/index.html b/projects/demo/src/modules/pipes/field-error/index.html
@@ -7,11 +7,7 @@
         <p>
             FieldErrorPipe takes order of errors as array and transform it to
             <code>TuiValidationError</code>
-            . Can be used with
-            <code>TuiError</code>
-        </p>
-        <p>
-            You can also use
+            . Can be used with TuiError component. You can also use
             <code>tuiFieldErrorContentPipe</code>
             with
             <code>TuiHint</code>
@@ -23,7 +19,17 @@
             >
                 tuiFieldErrorContentPipe example
             </a>
-            ). It returns a content of the TuiValidationError.
+            ). It returns a content of the TuiValidationError. The idea of
+            <code>tuiFieldError</code>
+            is to link
+            <code>tui-error</code>
+            with form controls. Also you can use
+            <code>tuiValidationErrorsProvider</code>
+            which provided
+            <code>TUI_VALIDATION_ERRORS</code>
+            . The idea of
+            <code>TUI_VALIDATION_ERRORS</code>
+            is to provide presentation for arbitrary error objects stored inside controls
         </p>
 
         <tui-doc-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 {tuiValidationErrorsProvider} 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}`,
-                },
-            },
+            tuiValidationErrorsProvider({
+                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 tuiValidationErrorsProvider = (
+    useValue: Record<string, Observable<PolymorpheusContent> | PolymorpheusContent>,
+): Provider => ({provide: TUI_VALIDATION_ERRORS, useValue});