Some Angular Reactive Forms custom validators.
Install
run npm install --save @justa/ng-validators
Install the peerDependecies:
npm install --save moment @brazilian-utils/validators
Examples
Using the validators:
Import ReactiveFormsModule
in app.module.ts
Example with CNPJ Validator
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup } from "@angular/forms";
import { jstValidators } from '@justa/ng-validators';
@Component({
selector: 'app-form',
templateUrl: './app-form.component.html',
styleUrls: ['./app-form.component.scss'],
})
export class AppFormComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group({
field: ['', jstValidators.validateCNPJ],
});
}
}
Example on Stackblitz:
Available custom validators for controls
Validator name | usage |
---|---|
validateDate | jstValidators.validateDate() |
validateCNPJ | jstValidators.validateCNPJ |
validateCPF | jstValidators.validateCPF |
validatePhone | jstValidators.validatePhone |
validateURL | jstValidators.validateURL |
Available custom validators for FormGroup
Validator name | usage |
---|---|
mustMatchMinMaxValue | jstValidators.mustMatchMinMaxValue('minControl', 'maxControl') |
Using Validators for FormGroup
Example:
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup } from "@angular/forms";
import { jstValidators } from '@justa/ng-validators';
@Component({
selector: 'app-form',
templateUrl: './app-form.component.html',
styleUrls: ['./app-form.component.scss'],
})
export class AppFormComponent implements OnInit {
form: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit() {
this.form = this.fb.group(
{
minValue: [''],
maxValue: [''],
},
{
validators: [
jstValidators.mustMatchMinMaxValue('minValue', 'maxValue'),
],
},
);
}
}
Build (dev only)
Run ng build @justa/ng-validators
on project root folder to build the project. The build artifacts will be stored in the dist/
directory.
To build the package, run ng build @justa/validators
. (See angular.json to more info about build proccess)
License
MIT