JarCasting
JarCasting JarCasting

ng2-validation

WebJar for ng2-validation

Лицензия

Лицензия

MIT
Группа

Группа

org.webjars.npm
Идентификатор

Идентификатор

ng2-validation
Последняя версия

Последняя версия

1.4.1
Дата

Дата
Тип

Тип

jar
Описание

Описание

ng2-validation
WebJar for ng2-validation
Ссылка на сайт

Ссылка на сайт

http://webjars.org

Скачать ng2-validation

Имя Файла Размер
ng2-validation-1.4.1.pom
ng2-validation-1.4.1.jar 51 KB
ng2-validation-1.4.1-sources.jar 22 bytes
ng2-validation-1.4.1-javadoc.jar 22 bytes
Обзор

Как подключить последнюю версию

<!-- https://jarcasting.com/artifacts/org.webjars.npm/ng2-validation/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>ng2-validation</artifactId>
    <version>1.4.1</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/ng2-validation/
implementation 'org.webjars.npm:ng2-validation:1.4.1'
// https://jarcasting.com/artifacts/org.webjars.npm/ng2-validation/
implementation ("org.webjars.npm:ng2-validation:1.4.1")
'org.webjars.npm:ng2-validation:jar:1.4.1'
<dependency org="org.webjars.npm" name="ng2-validation" rev="1.4.1">
  <artifact name="ng2-validation" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='ng2-validation', version='1.4.1')
)
libraryDependencies += "org.webjars.npm" % "ng2-validation" % "1.4.1"
[org.webjars.npm/ng2-validation "1.4.1"]

Зависимости

Библиотека не имеет зависимостей. Это самодостаточное приложение, которое не зависит ни от каких других библиотек.

Модули Проекта

Данный проект не имеет модулей.

Deprecated, you can fork and publish yours.

Description

Angular2 custom validation, inspired by jQuery validation.

Install

npm install ng2-validation --save

Systemjs

'ng2-validation': 'npm:ng2-validation/bundles/ng2-validation.umd.js'

Validators

angular2 built-in validators

  • required
  • minlength
  • maxlength
  • pattern

custom validators

  • rangeLength
  • min
  • gt
  • gte
  • max
  • lt
  • lte
  • range
  • digits
  • number
  • url
  • email
  • date
  • minDate
  • maxDate
  • dateISO
  • creditCard
  • json
  • base64
  • phone
  • uuid
  • equal
  • notEqual
  • equalTo
  • notEqualTo

Usage

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 'ng2-validation'

import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule, CustomFormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

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>

gt

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

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>

lt

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

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" email/>
<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>

minDate

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

maxDate

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

dateISO

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

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>

phone

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

details see libphonenumber

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>

equal

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

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>

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>

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 'ng2-validation';

@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>

rangeLength

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

min

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

gt

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

max

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

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)

minDate

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

maxDate

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

dateISO

new FormControl('', CustomValidators.dateISO)

creditCard

new FormControl('', CustomValidators.creditCard)

json

new FormControl('', CustomValidators.json)

base64

new FormControl('', CustomValidators.base64)

phone

new FormControl('', CustomValidators.phone('zh-CN'))

uuid

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

equal

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

notEqual

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

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>

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>

License

MIT

Версии библиотеки

Версия
1.4.1
1.3.1