@justa/ng-validators

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:

• https://stackblitz.com/edit/ng-validators-jst

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