Zamolxis | Control Errors

Installation

Note: Requires @angular/cdk package.

Overview

A modular directive that automatically displays error messages associated with form controls when validation errors occur. It creates an overlay to show the error, positioned relative to the host input element.

Usage of the zxControlErrors directive

Example

HTML

Name

You can also provide a custom component that matches your organisation style guide.

Additionally, you can provide an errors dictionary to add support for more error messages or extend ZX_CONTROL_ERRORS_DICTIONARY object for matching all the error messages.

You can also provide custom error messages for a specific field as shown below.

API Reference

import { ZxControlErrors } from '@zamolxis/control-errors';

Selector: zxControlErrors

Exported as: zxControlErrors

Properties

@Input('zxControlErrors') customErrors: Record<string, string>

Custom errors for the control. The key is the error name, the value is the error message. If not specified, the default errors (from errors dictionary) will be used.

@Input({ transform: numberAttribute }) offsetY: number | undefined

The offset of the error message component in pixels from the top of the control. If the value is not specified, the error message component will be displayed 12px from the top of the control.

@Input({ transform: numberAttribute }) debounceTime: number | undefined

The delay in milliseconds for displaying the error message when the user performs an action, such as typing. The default value is 400ms.

It is possible to configure the offsetY and debounceTime properties at the application (or component) level using the ZX_CONTROL_ERRORS_CONFIG injection token, as shown below.

Methods

checkForErrors(): void

Can be used to manually trigger the check for errors. Useful when there's a single input and not part of a form.

Example

HTML