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