FieldError KIT

Examples Setup
Source code
See also
Error

FieldErrorPipe takes order of errors as array and transform it to TuiValidationError . Can be used with TuiError component. You can also use tuiFieldErrorContentPipe with TuiHint (see tuiFieldErrorContentPipe example ). 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

Basic

#

If you want to show a validation message as soon as a user starts typing, subscribe on form value changes and call markAsTouched on control on first value change. You can also use tuiMarkControlAsTouchedAndValidate

tuiFieldError pipe can be used inside your controls to show error messages for parent NgControl or ControlContainer through DI without explicit directive on tui-error .

Below is an error for the entire form:

With custom messages for validators

#

with a template

#

With adding new controls (FormArray)

#

async validator

#

tuiFieldErrorContentPipe

#
Name
Price
Latte
Cappuccino

Wrapper error component

#