AngularValidator

A simple plugin Angular component for custom form validation.

ng-form-validator

Angular 5 - Forms validation

Live demo

http://www.giovannisorgente.it/AngularValidator/

Getting started

npm i --save ng-form-validator

Add following lines into your

module:

import { ValidatorsModule } from './ng-form-validator';

add ValidatorsModule to your module imports section

imports: [ ValidatorsModule.forRoot() ]

inject the ValidatorManager service in your view component:

@Component({
  selector: 'app-view-validators',
  templateUrl: 'app.view.validators.html'
})
export class AppViewValidatorsDemo {

  public validatorManager: ValidatorManager = null;

  constructor(validator: ValidatorManager) {
    this.validatorManager = validator;
  }

  public runValidation() {
    this.validatorManager.Validate();
  }

}

use the unobtrusive validation by html:

<input type="text" validator-required [validator-manager]="validatorManager" [validator-property]="'RequiredField'">

<input type="text" validator-required validator-integer [validator-manager]="validatorManager" [validator-property]="'IntegerField'">

<input type="text" validator-ip [validator-manager]="validatorManager" [validator-property]="'IPField'">

<input type="text"
            validator-range
            [validator-range-from]="5"
            [validator-range-to]="10"
            [validator-range-from-inclusive]="true"
            [validator-range-to-inclusive]="true"
            required="false"
            [validator-manager]="validatorManager" [validator-property]="'RangeFieldValidation'">

access the validation results looking at the ValidatorManager service:

<h3>Errors</h3>
<pre>
  Global -> Is Valid: {{ validatorManager.IsValid() }}

  <table>
    <thead>
      <tr>
        <td>Property</td>
        <td>ValidationType</td>
        <td>Is Valid?</td>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let el of validatorManager.Results">
        <td>{{ el.PropertyName }}</td>
        <td>{{ el.ValidatorType }}</td>
        <td>{{ el.IsValid }}</td>
      </tr>
    </tbody>
  </table>
</pre>