Form

To create advanced forms, the library provides a set of directives and components that can be used to build forms with ease. You can see them in action in the components section, especially in the Data Entry category.

Validators

The library provides a set of built-in validators that can be used to validate form fields when using Reactive Forms.
You can also create your own custom validators.
See the default autotips for each validator here.

The luiValidators class extends the Angular Validators so you can use the built-in Angular validators as well.

import { luiValidators } from '@lqvrent-workspace/lqvrent-ui/core/form';

Email

This validator overrides the default Angular email validator, we thought that the default one is not strict enough. It uses this regular expression.

// If using the default Angular email validator, this would be valid
const invalidControl = new FormControl('bad@email', LuiValidators.email);

console.log(control.errors); // { 'email': true }

IPv4

This validator checks if the field is a valid IPv4 address. It uses this regular expression.

const invalidControl = new FormControl('512.512.512.512', LuiValidators.ipv4);

console.log(control.errors); // { 'ipv4': true }

IPv6

This validator checks if the field is a valid IPv6 address. It uses this regular expression.

const invalidControl = new FormControl('192.168.1.1', LuiValidators.ipv6);

console.log(control.errors); // { 'ipv6': true }

Port

This validator checks if the field is a valid port number.

const invalidControl = new FormControl('65536', LuiValidators.port);

console.log(control.errors); // { 'port': true }

Semantic Version

This validator checks if the field is a valid semantic version. It uses this regular expression.

const invalidControl = new FormControl('1.2', LuiValidators.semver);

console.log(control.errors); // { 'semver': true }

URL

This validator checks if the field is a valid URL. It uses this regular expression.

const invalidControl = new FormControl('www.whatever.com', LuiValidators.url);

console.log(control.errors); // { 'url': true }

Slug

This validator checks if the field is a valid URL slug. It uses this regular expression.

const invalidControl = new FormControl('my--slug', LuiValidators.urlSlug);

console.log(control.errors); // { 'urlslug': true }