Wondering what’s next for npm?Check out our public roadmap! »

    ngx-custom-validate

    9.1.1 • Public • Published

    Description

    Angular Custom Validators, forked from ng2-validation. Directives for form validation (template or model driven).

    Installation

    npm i ngx-custom-validate --save

    Validators

    Angular built-in validators

    • maxlength
    • minlength
    • pattern
    • required

    Custom validators

    • array length
    • base64
    • credit card
    • date
    • date ISO
    • digits
    • email
    • equal
    • not equal
    • equal to
    • not equal to
    • greater than
    • greater than or equal
    • json
    • less than
    • less than or equal
    • max
    • max date
    • min
    • min date
    • not equal
    • not equal to
    • number
    • property
    • range
    • range length
    • url
    • uuid

    Usage

    The paramater of each validator (if it has) can be accessible in the template with reason.

    <input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10">
    <!-- Will display : error message and must be greater than 10 -->
    <p *ngIf="field.errors?.gt">error message and must be greater than {{ field.errors?.reason }}</p>

    Template driven

    import FormsModule and CustomFormsModule in app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms';
    import { CustomFormsModule } from 'ngx-custom-validate';
     
    import { AppComponent } from './app.component';
     
    @NgModule({
        imports: [BrowserModule, FormsModule, CustomFormsModule],
        declarations: [AppComponent],
        bootstrap: [AppComponent]
    })
    export class AppModule {
    }

    range length - rangeLength

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [rangeLength]="[5, 9]">
    <p *ngIf="field.errors?.rangeLength">error message</p>

    min

    <input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [min]="10">
    <p *ngIf="field.errors?.min">error message</p>

    greater than - gt

    <input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gt]="10">
    <p *ngIf="field.errors?.gt">error message</p>

    greater than or equal - gte

    <input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [gte]="10">
    <p *ngIf="field.errors?.gte">error message</p>

    max

    <input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [max]="20">
    <p *ngIf="field.errors?.max">error message</p>

    less than - lt

    <input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lt]="20">
    <p *ngIf="field.errors?.lt">error message</p>

    less than or equal - lte

    <input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [lte]="20">
    <p *ngIf="field.errors?.lte">error message</p>

    range

    <input type="number" [(ngModel)]="model.field" name="field" #field="ngModel" [range]="[10, 20]">
    <p *ngIf="field.errors?.range">error message</p>

    digits

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" digits>
    <p *ngIf="field.errors?.digits">error message</p>

    number

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" number>
    <p *ngIf="field.errors?.number">error message</p>

    url

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" url>
    <p *ngIf="field.errors?.url">error message</p>

    email

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" ngvemail>
    <p *ngIf="field.errors?.email">error message</p>

    date

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" date>
    <p *ngIf="field.errors?.date">error message</p>

    min date - minDate

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" minDate="2016-09-09">
    <p *ngIf="field.errors?.minDate">error message</p>
    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [minDate]="myOtherField">
    <p *ngIf="field.errors?.minDate">error message</p>

    max date - maxDate

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" maxDate="2016-09-09">
    <p *ngIf="field.errors?.maxDate">error message</p>
    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [maxDate]="myOtherField">
    <p *ngIf="field.errors?.maxDate">error message</p>

    date ISO - dateISO

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" dateISO>
    <p *ngIf="field.errors?.dateISO">error message</p>

    credit card - creditCard

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" creditCard>
    <p *ngIf="field.errors?.creditCard">error message</p>

    json

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" json>
    <p *ngIf="field.errors?.json">error message</p>

    base64

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" base64>
    <p *ngIf="field.errors?.base64">error message</p>

    uuid

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [uuid]="'all'">
    <p *ngIf="field.errors?.uuid">error message</p>

    default: all

    support

    • 3
    • 4
    • 5
    • all

    equal

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [equal]="'xxx'">
    <p *ngIf="field.errors?.equal">error message</p>

    not equal - notEqual

    <input type="text" [(ngModel)]="model.field" name="field" #field="ngModel" [notEqual]="'xxx'">
    <p *ngIf="field.errors?.notEqual">error message</p>

    equal to - equalTo

    <input type="password" ngModel name="password" #password="ngModel" required>
    <p *ngIf="password.errors?.required">required error</p>
    <input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [equalTo]="password">
    <p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>

    not equal to - notEqualTo

    <input type="text" ngModel name="password" #password="ngModel" required>
    <p *ngIf="password.errors?.required">required error</p>
    <input type="password" ngModel name="certainPassword" #certainPassword="ngModel" [notEqualTo]="password">
    <p *ngIf="certainPassword.errors?.equalTo">equalTo error</p>

    property

    public obj = { id: 1 } // OK
    public obj = { name: 'baguette' } // KO
    <input type="text" ngModel name="obj" #obj="ngModel" property="id">
    <!-- For multiple properties check -->
    <input type="text" ngModel name="obj" #obj="ngModel" property="id,value,name">
    <p *ngIf="obj.errors?.property">property error</p>

    array length - ArrayLength

    public arr = [{ name: 'baguette' }, { name: 'croisant' }] // OK
    public arr = [{ name: 'baguette' }] // KO
    <input type="text" ngModel name="arr" #arr="ngModel" arrayLength="2">
    <p *ngIf="arr.errors?.arrayLength">arrayLength error</p>

    Model driven

    import ReactiveFormsModule in app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { ReactiveFormsModule } from '@angular/forms';
     
    import { AppComponent } from './app.component';
     
    @NgModule({
        imports: [BrowserModule, ReactiveFormsModule],
        declarations: [AppComponent],
        bootstrap: [AppComponent]
    })
    export class AppModule {
    }

    import CustomValidators in app.component.ts

    import { Component } from '@angular/core';
    import { FormGroup, FormControl } from '@angular/forms';
    import { CustomValidators } from 'ngx-custom-validators';
     
    @Component({
        selector: 'app',
        template: require('./app.html')
    })
    export class AppComponent {
        form: FormGroup;
     
        constructor() {
            this.form = new FormGroup({
                field: new FormControl('', CustomValidators.range([5, 9]))
            });
        }
    }
    <input type="text" formControlName="field">
    <p *ngIf="demoForm.from.controls.field.errors?.rangeLength">error message</p>

    range length - rangeLenght

    new FormControl('', CustomValidators.rangeLength([5, 9]))

    min

    new FormControl('', CustomValidators.min(10))

    greater than - gt

    new FormControl('', CustomValidators.gt(10))

    max

    new FormControl('', CustomValidators.max(20))

    less than - lt

    new FormControl('', CustomValidators.lt(20))

    range

    new FormControl('', CustomValidators.range([10, 20]))

    digits

    new FormControl('', CustomValidators.digits)

    number

    new FormControl('', CustomValidators.number)

    url

    new FormControl('', CustomValidators.url)

    email

    new FormControl('', CustomValidators.email)

    date

    new FormControl('', CustomValidators.date)

    min date - minDate

    new FormControl('', CustomValidators.minDate('2016-09-09'))

    max date - maxDate

    new FormControl('', CustomValidators.maxDate('2016-09-09'))

    date ISO - dateISO

    new FormControl('', CustomValidators.dateISO)

    credit card - creditCard

    new FormControl('', CustomValidators.creditCard)

    json

    new FormControl('', CustomValidators.json)

    base64

    new FormControl('', CustomValidators.base64)

    uuid

    new FormControl('', CustomValidators.uuid('3'))

    equal

    new FormControl('', CustomValidators.equal('xxx'))

    not equal - notEqual

    new FormControl('', CustomValidators.notEqual('xxx'))

    equal to - equalTo

    let password = new FormControl('', Validators.required);
    let certainPassword = new FormControl('', CustomValidators.equalTo(password));
     
    this.form = new FormGroup({
      password: password,
      certainPassword: certainPassword
    });
    <form [formGroup]="form">
      <input type="password" formControlName="password">
      <p *ngIf="form.controls.password.errors?.required">required error</p>
      <input type="password" formControlName="certainPassword">
      <p *ngIf="form.controls.certainPassword.errors?.equalTo">equalTo error</p>
    </form>

    not equal to - notEqualTo

    let password = new FormControl('', Validators.required);
    let certainPassword = new FormControl('', CustomValidators.notEqualTo(password));
     
    this.form = new FormGroup({
      password: password,
      certainPassword: certainPassword
    });
    <form [formGroup]="form">
      <input type="password" formControlName="password">
      <p *ngIf="form.controls.password.errors?.required">required error</p>
      <input type="password" formControlName="certainPassword">
      <p *ngIf="form.controls.certainPassword.errors?.notEqualTo">notEqualTo error</p>
    </form>

    property

    public obj = { id: 1 };
     
    this.form = new FormGroup({
      obj: new FormControl('', CustomValidators.property('id'))
      // For multiple properties check
      objnew FormControl('', CustomValidators.property('id,value,name'))
    });
    <form [formGroup]="form">
      <input type="text" formControlName="obj">
      <p *ngIf="form.controls.obj.errors?.property">property error</p>
    </form>

    array length - ArrayLength

    public arr = [{ name: 'baguette' }, { name: 'croisant' }]
    this.form = new FormGroup({
      arr: new FormControl('', CustomValidators.arrayLength(2))
    });
    <form [formGroup]="form">
      <input type="text" formControlName="arr">
      <p *ngIf="arr.errors?.arrayLength">arrayLength error</p>
    </form>

    For developpers

    To run the projet : npm start Don't forget to run npm test and npm lint before each pull request. Thanks !

    Install

    npm i ngx-custom-validate

    DownloadsWeekly Downloads

    2

    Version

    9.1.1

    License

    MIT

    Unpacked Size

    692 kB

    Total Files

    172

    Last publish

    Collaborators

    • avatar