VTS Kit Angular Utilities (Validator)

Installation

npm install @vts-kit/angular-validator

Guideline

• Template-driven Form

Check list of validators below and use corresponding directives and options.

Import:

import { VtsValidatorModule } from '@vts-kit/angular-validator';

@(NgModule | Component | ...)({
    imports: [VtsValidatorModule]
})

Usage:

//// Without other options (Some validators don't have extra options)
// *.html
<input ngModel url  />

//// With options
// *.html
<input number [larger]="5" [smallerOrEqual]="10" #control="ngModel">

// You can see raise errors here
{{ control.errors | json }}

• Reactive Form

Check list of validators below and use corresponding functions and options.

Import:

import { VTSValidators } from '@vts-kit/angular-validator';

export class Component ... {
    // Use with 'validators' property of FormControl, FormGroup, FormBuilder, ...
    control = new FormBuilder().control('', {
        validators: [VTSValidators.url]
    })
}

Usage:

//// Without other options (Some validators don't have extra options)
// *.ts
control = new FormBuilder().control('', {
    validators: [VTSValidators.url]
})

// *.html
<input [formControl]="control" />

//// With options
// *.ts
control = new FormBuilder().control('', {
    validators: [
        VTSValidators.number({
          larger: 5,
          smallerOrEqual: 10
        })
    ]
})

// *.html
<input [formControl]="control" />

// You can see raise errors here
{{ control.errors | json }}

List of validators

• Viettel Mail
• IP Address
• IP Address & Port
• Number
• URL

Viettel Mail

Validate if input is a valid Viettel Email (@viettel.com.vn)

• Directive (Template-driven Form): viettelMail
• Function (Reactive Form): VTSValidators.viettelMail
• Options: None
• Raise error: viettelMail

IP Address

Validate if input is a valid IP address

• Directive (Template-driven Form): ipAddress
• Function (Reactive Form): VTSValidators.ipAddress
• Options: None
• Raise error: ipAddress

IP Address & Port

Validate if input is a valid IP address and Port (<ip>:<port>)

• Directive (Template-driven Form): ipAddressPort
• Function (Reactive Form): VTSValidators.ipAddressPort
• Options: None
• Raise error: ipAddressPort

Number

Validate if input is a valid number, number type (float, integer), larger, smaller

• Directive (Template-driven Form): number
• Function (Reactive Form): VTSValidators.number
• Options and raise errors:

| No | Name | Type | Description | Raise error | | --- | ---------------- | -------------------------------------- | ------------------------------------------------------------- | --------------------- | | 1 | number | boolean | Check if input can be convert to number | number | | 2 | numberType | float or integer or any (default | Check type of number | numberType | | 3 | larger | number | Check value of input is larger than given number | numberLarger | | 4 | largerOrEqual | number | Check value of input is larger than or equal to given number | numberLargerOrEqual | | 5 | smaller | number | Check value of input is smaller than given number | numberSmaller | | 6 | smallerOrEqual | number | Check value of input is smaller than or equal to given number | numberSmallerOrEqual |

URL

Validate if input is a valid URL

• Directive (Template-driven Form): url
• Function (Reactive Form): VTSValidators.url
• Options: None
• Raise error: url