NgEasyValidation

Automatically add Tippy.js tooltips to input fields containing its errors.

It uses the validation logic from Angular's template-driven forms, and wraps it in a directive that adds tooltips to the respective input fields.

Demo

Check out the demo

Installation

Install it via NPM

npm i ng-easy-validation

Include the module

import { NgEasyValidationModule } from 'ng-easy-validation';

Basic usage

1. Prepare form

To begin, add a reference to FormGroup on the form. <form #form="ngForm">

Then add the ngEasyValidation directive, together with the requirements (more on this later).

<form #form="ngForm" [ngEasyValidation]="requirements">

2. Prepare input fields

Since this library wraps Angular's template-driven form, every input field needs to have an [(ngModel)] assigned to it, as well as a unique name.

<input type="text" [(ngModel)]="firstname" name="firstname">

3. Create a requirements object

The requirements must be an object with keys that refer to the name property, and values that contain a list the validators for that field.

requirements: any = {
        "firstname": [
            { validator: required() },
            { validator: maxLength(50) },
            { validator: invalidValues(["Brad", "Chad", "Bob"]) }
        ]
    }

Properties of validation object

validator

This is the object that will be executed to help determine if a field is valid or not. This library supports all of Angular's built-in validators, plus many custom ones you can use in your application.

message (optional)

The error message that will be shown in the tooltip. When left empty, an appropriate message will be generated.

tooltipsOnInit (optional)

A boolean that tells to library to show tooltips immediately after the form has been loaded into the page. Default value is false.

Directive options

The ngEasyValidation directive supports modification through these options.

tippyProps

An object with the default properties for the Tippy.js tooltips. See all properties.

validationDebounceTime

A number reprenting the amount of milliseconds that will be applied to RxJS' debounceTime operator before applying the tooltips.

This can be used to increase the performance of heavy forms with many input fields.

Validators

Importing

ngEasyValidation supports lots of validators that can be imported as such

import { required, maxLength, invalidValues } from 'ng-easy-validation';

List of validators

validator	Invalid when	Notes
required()	value is null or empty
requiredTrue()	value is not true	mostly used with checkboxes
nullValidator()	never	performs no operation
minLength(minLength: number)	value has less characters than minLength
maxLength(maxLength: number)	value has more characters than maxLength
email()	value is not a valid email address
min(min: number)	value is less than min
max(max: number)	value is more than max
between(min: number, max: number)	value is less than min or more than max
invalidValues(invalidValues: any[] | any, valueModifier: (any) => any = x => x)	value is in invalidValues	valueModifier can be used to modify what was entered before it will be matched. Ex: apply toLowerCase() before matching
requiredValues(requiredValues: any[] | any, valueModifier: (any) => any = x => x)	value is not in requiredValues	valueModifier can be used to modify what was entered before it will be matched. Ex: apply toLowerCase() before matching
invalidCharacters(invalidCharacters: string)	value contains any of the characters in invalidCharacters	invalidCharacters is a string containing all the characters
conditionalValidator(validator: ValidatorIdMap, condition: (AbstractControl) => boolean)	condition is met and validator is invalid
sqlObjectName()	value is not a valid SQL object name
isInteger()	value is not an integer
isNumeric()	value is not a numeric
isAlphaNumeric()	value is not alphanumerical
isAlphabetical()	value is not alphabetical
startsWith(str: string)	value doesn't start with str
endsWith(str: string)	value doesn't end with str

License

MIT