diff --git a/projects/demo-playwright/tests/kit/field-error/field-error.spec.ts b/projects/demo-playwright/tests/kit/field-error/field-error.spec.ts index f6ae87ca7930..84cc4130d248 100644 --- a/projects/demo-playwright/tests/kit/field-error/field-error.spec.ts +++ b/projects/demo-playwright/tests/kit/field-error/field-error.spec.ts @@ -1,23 +1,33 @@ -import {tuiGoto} from '@demo-playwright/utils'; +import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils'; import {expect, test} from '@playwright/test'; -test.describe('TuiFieldError', () => { +test.describe('FieldError', () => { test('Errors of invalid control are shown correctly', async ({page}) => { + const example = new TuiDocumentationPagePO(page).getExample('#base'); + await tuiGoto(page, '/pipes/field-error'); - const errorPipeInput = page - .locator('tui-field-error-pipe-example-1 input') - .first(); + const input = example.locator('input').first(); - await errorPipeInput.focus(); + await input.focus(); + await input.blur(); - await page.waitForTimeout(50); + await page.waitForTimeout(500); - await errorPipeInput.blur(); + await expect(example).toHaveScreenshot('01-field-error.png', { + animations: 'allow', + }); + }); + + test('Submit invalid form', async ({page}) => { + const example = new TuiDocumentationPagePO(page).getExample('#patterns'); + + await tuiGoto(page, '/pipes/field-error'); + await example.locator('button').click(); - const example = page.getByTestId('tui-doc-example').first(); + await page.waitForTimeout(500); - await expect(example).toHaveScreenshot('shows-error-under-field.png', { + await expect(example).toHaveScreenshot('02-field-error.png', { animations: 'allow', }); }); diff --git a/projects/demo/src/modules/pipes/field-error/examples/3/index.html b/projects/demo/src/modules/pipes/field-error/examples/3/index.html index 181c298ba69e..b14101d874f4 100644 --- a/projects/demo/src/modules/pipes/field-error/examples/3/index.html +++ b/projects/demo/src/modules/pipes/field-error/examples/3/index.html @@ -1,6 +1,7 @@
+ + + +
diff --git a/projects/demo/src/modules/pipes/field-error/examples/3/index.less b/projects/demo/src/modules/pipes/field-error/examples/3/index.less new file mode 100644 index 000000000000..a7c53fca3c2b --- /dev/null +++ b/projects/demo/src/modules/pipes/field-error/examples/3/index.less @@ -0,0 +1,5 @@ +.checkbox { + display: flex; + align-items: center; + gap: 0.5rem; +} diff --git a/projects/demo/src/modules/pipes/field-error/examples/3/index.ts b/projects/demo/src/modules/pipes/field-error/examples/3/index.ts index 50c4a6cfea8a..beaa4919e4fd 100644 --- a/projects/demo/src/modules/pipes/field-error/examples/3/index.ts +++ b/projects/demo/src/modules/pipes/field-error/examples/3/index.ts @@ -8,24 +8,16 @@ import { } from '@angular/forms'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; -import {TuiValidationError} from '@taiga-ui/cdk'; +import {tuiMarkControlAsTouchedAndValidate, TuiValidationError} from '@taiga-ui/cdk'; import {type PolymorpheusContent} from '@tinkoff/ng-polymorpheus'; const secretRegexTen = /^\d{10}$/; const secretRegexTwelve = /^\d{12}$/; -export function innValidator(field: AbstractControl): unknown { - return field.value && - (secretRegexTen.test(field.value) || secretRegexTwelve.test(field.value)) - ? null - : { - inn: new TuiValidationError('Secret number contains 10 or 12 digits'), - }; -} - @Component({ selector: 'tui-field-error-pipe-example-3', templateUrl: './index.html', + styleUrls: ['./index.less'], encapsulation, changeDetection, }) @@ -41,12 +33,17 @@ export class TuiFieldErrorPipeExample3 implements OnInit { protected readonly testForm = new FormGroup({ testValue1: new FormControl('', [Validators.required, this.getSecretValidator()]), testValue2: this.testValue2, + testValue3: new FormControl(false, [Validators.requiredTrue]), }); public ngOnInit(): void { this.testValue2.setValidators([Validators.required, this.companyValidator]); } + protected onSubmit(): void { + tuiMarkControlAsTouchedAndValidate(this.testForm); + } + private readonly companyValidator = ( field: AbstractControl, ): ValidationErrors | null => diff --git a/projects/demo/src/modules/pipes/field-error/field-error.module.ts b/projects/demo/src/modules/pipes/field-error/field-error.module.ts index 5bffc0c3675c..a26b8f7b9293 100644 --- a/projects/demo/src/modules/pipes/field-error/field-error.module.ts +++ b/projects/demo/src/modules/pipes/field-error/field-error.module.ts @@ -13,6 +13,7 @@ import { TuiLinkModule, TuiTextfieldControllerModule, } from '@taiga-ui/core'; +import {TuiCheckboxModule} from '@taiga-ui/experimental'; import { TuiFieldErrorPipeModule, TuiInputModule, @@ -49,6 +50,7 @@ import {ExampleTuiFieldErrorPipeComponent} from './field-error.component'; TuiInputNumberModule, TuiCurrencyPipeModule, PolymorpheusModule, + TuiCheckboxModule, RouterModule.forChild(tuiGenerateRoutes(ExampleTuiFieldErrorPipeComponent)), ], declarations: [