From b22e9c2f0a4f54df75e277e2b7b9584f9a2ee62d Mon Sep 17 00:00:00 2001 From: Maksim Ivanov Date: Fri, 4 Oct 2024 13:26:18 +0300 Subject: [PATCH] feat(kit): add `tuiValidationErrorsProvider` (#9342) --- .../src/modules/components/error/index.html | 4 ++- .../components/textarea/examples/4/index.ts | 13 +++----- .../pipes/field-error/examples/2/index.ts | 31 +++++++++---------- .../pipes/field-error/examples/6/index.ts | 14 +++------ .../src/modules/pipes/field-error/index.html | 18 +++++++---- .../test/field-error-content-pipe.spec.ts | 13 +++----- projects/kit/tokens/validation-errors.ts | 8 +++-- 7 files changed, 49 insertions(+), 52 deletions(-) diff --git a/projects/demo/src/modules/components/error/index.html b/projects/demo/src/modules/components/error/index.html index 0f60f7e7d573..30780c68abf2 100644 --- a/projects/demo/src/modules/components/error/index.html +++ b/projects/demo/src/modules/components/error/index.html @@ -13,7 +13,9 @@ > tuiFieldError - . + . The idea of + tui-error + is to show arbitrary messages styled as errors, with height or fade transition.

- `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 index 0adef86cbf77..1835a96775d1 100644 --- 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 index 0c6275f16baa..7c41e6c6f1a6 100644 --- a/projects/demo/src/modules/pipes/field-error/index.html +++ b/projects/demo/src/modules/pipes/field-error/index.html @@ -7,11 +7,7 @@

FieldErrorPipe takes order of errors as array and transform it to TuiValidationError - . Can be used with - TuiError -

-

- You can also use + . Can be used with TuiError component. You can also use tuiFieldErrorContentPipe with TuiHint @@ -23,7 +19,17 @@ > tuiFieldErrorContentPipe example - ). It returns a content of the TuiValidationError. + ). It returns a content of the TuiValidationError. The idea of + tuiFieldError + is to link + tui-error + with form controls. Also you can use + tuiValidationErrorsProvider + which provided + TUI_VALIDATION_ERRORS + . The idea of + TUI_VALIDATION_ERRORS + is to provide presentation for arbitrary error objects stored inside controls

{ 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 index 6b4012e17abd..045777e56fcf 100644 --- 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 | PolymorpheusContent> >({}); + +export const tuiValidationErrorsProvider = ( + useValue: Record | PolymorpheusContent>, +): Provider => ({provide: TUI_VALIDATION_ERRORS, useValue});