{"id":21891069,"url":"https://github.com/rocity/ng2-validation-clone","last_synced_at":"2026-05-21T05:08:03.718Z","repository":{"id":98426648,"uuid":"114648844","full_name":"rocity/ng2-validation-clone","owner":"rocity","description":"Clone of ng2-validation","archived":false,"fork":false,"pushed_at":"2017-12-18T14:15:41.000Z","size":76,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-02T22:32:21.925Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rocity.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-18T14:11:38.000Z","updated_at":"2018-02-28T07:39:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"c0e79d79-c11e-45c5-960f-3e6342eff666","html_url":"https://github.com/rocity/ng2-validation-clone","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rocity%2Fng2-validation-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rocity%2Fng2-validation-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rocity%2Fng2-validation-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rocity%2Fng2-validation-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rocity","download_url":"https://codeload.github.com/rocity/ng2-validation-clone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244898458,"owners_count":20528341,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T12:19:17.567Z","updated_at":"2026-05-21T05:07:58.686Z","avatar_url":"https://github.com/rocity.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Description\n\nAngular2 custom validation, inspired by jQuery validation.\n\n# Install\n\n```bash\nnpm install ng2-validation --save\n```\n# Systemjs\n\n```bash\n'ng2-validation': 'npm:ng2-validation/bundles/ng2-validation.umd.js'\n```\n\n# Validators\n\n## angular2 built-in validators\n\n- required\n- minlength\n- maxlength\n- pattern\n\n## custom validators\n\n- rangeLength\n- min\n- gt\n- gte\n- max\n- lt\n- lte\n- range\n- digits\n- number\n- url\n- email\n- date\n- minDate\n- maxDate\n- dateISO\n- creditCard\n- json\n- base64\n- phone\n- uuid\n- equal\n- notEqual\n- equalTo\n- notEqualTo\n\n# Usage\n\n## template driven\n\nimport `FormsModule` and `CustomFormsModule` in *app.module.ts*\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { FormsModule } from '@angular/forms';\nimport { CustomFormsModule } from 'ng2-validation'\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n    imports: [BrowserModule, FormsModule, CustomFormsModule],\n    declarations: [AppComponent],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n### rangeLength\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" [rangeLength]=\"[5, 9]\"/\u003e\n\u003cp *ngIf=\"field.errors?.rangeLength\"\u003eerror message\u003c/p\u003e\n```\n\n### min\n\n```html\n\u003cinput type=\"number\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" [min]=\"10\"/\u003e\n\u003cp *ngIf=\"field.errors?.min\"\u003eerror message\u003c/p\u003e\n```\n\n### gt\n\n```html\n\u003cinput type=\"number\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" [gt]=\"10\"/\u003e\n\u003cp *ngIf=\"field.errors?.gt\"\u003eerror message\u003c/p\u003e\n```\n\n### gte\n\n```html\n\u003cinput type=\"number\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" [gte]=\"10\"/\u003e\n\u003cp *ngIf=\"field.errors?.gte\"\u003eerror message\u003c/p\u003e\n```\n\n### max\n\n```html\n\u003cinput type=\"number\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" [max]=\"20\"/\u003e\n\u003cp *ngIf=\"field.errors?.max\"\u003eerror message\u003c/p\u003e\n```\n\n### lt\n\n```html\n\u003cinput type=\"number\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" [lt]=\"20\"/\u003e\n\u003cp *ngIf=\"field.errors?.lt\"\u003eerror message\u003c/p\u003e\n```\n\n### lte\n\n```html\n\u003cinput type=\"number\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" [lte]=\"20\"/\u003e\n\u003cp *ngIf=\"field.errors?.lte\"\u003eerror message\u003c/p\u003e\n```\n\n### range\n\n```html\n\u003cinput type=\"number\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" [range]=\"[10, 20]\"/\u003e\n\u003cp *ngIf=\"field.errors?.range\"\u003eerror message\u003c/p\u003e\n```\n\n### digits\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" digits/\u003e\n\u003cp *ngIf=\"field.errors?.digits\"\u003eerror message\u003c/p\u003e\n```\n\n### number\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" number/\u003e\n\u003cp *ngIf=\"field.errors?.number\"\u003eerror message\u003c/p\u003e\n```\n\n### url\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" url/\u003e\n\u003cp *ngIf=\"field.errors?.url\"\u003eerror message\u003c/p\u003e\n```\n\n### email\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" email/\u003e\n\u003cp *ngIf=\"field.errors?.email\"\u003eerror message\u003c/p\u003e\n```\n\n### date\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" date/\u003e\n\u003cp *ngIf=\"field.errors?.date\"\u003eerror message\u003c/p\u003e\n```\n\n### minDate\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" minDate=\"2016-09-09\"/\u003e\n\u003cp *ngIf=\"field.errors?.minDate\"\u003eerror message\u003c/p\u003e\n```\n\n### maxDate\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" maxDate=\"2016-09-09\"/\u003e\n\u003cp *ngIf=\"field.errors?.maxDate\"\u003eerror message\u003c/p\u003e\n```\n\n### dateISO\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" dateISO/\u003e\n\u003cp *ngIf=\"field.errors?.dateISO\"\u003eerror message\u003c/p\u003e\n```\n\n### creditCard\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" creditCard/\u003e\n\u003cp *ngIf=\"field.errors?.creditCard\"\u003eerror message\u003c/p\u003e\n```\n\n### json\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" json/\u003e\n\u003cp *ngIf=\"field.errors?.json\"\u003eerror message\u003c/p\u003e\n```\n\n### base64\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" base64/\u003e\n\u003cp *ngIf=\"field.errors?.base64\"\u003eerror message\u003c/p\u003e\n```\n\n### phone\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" phone=\"CN\"/\u003e\n\u003cp *ngIf=\"field.errors?.phone\"\u003eerror message\u003c/p\u003e\n```\n\ndetails see [libphonenumber](https://github.com/halt-hammerzeit/libphonenumber-js)\n\n### uuid\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" [uuid]=\"'all'\"/\u003e\n\u003cp *ngIf=\"field.errors?.uuid\"\u003eerror message\u003c/p\u003e\n```\n\n*default*: all\n\n**support**\n\n- 3\n- 4\n- 5\n- all\n\n### equal\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" [equal]=\"'xxx'\"/\u003e\n\u003cp *ngIf=\"field.errors?.equal\"\u003eerror message\u003c/p\u003e\n```\n\n### equal\n\n```html\n\u003cinput type=\"text\" [(ngModel)]=\"model.field\" name=\"field\" #field=\"ngModel\" [notEqual]=\"'xxx'\"/\u003e\n\u003cp *ngIf=\"field.errors?.notEqual\"\u003eerror message\u003c/p\u003e\n```\n\n### equalTo\n\n```html\n\u003cinput type=\"password\" ngModel name=\"password\" #password=\"ngModel\" required/\u003e\n\u003cp *ngIf=\"password.errors?.required\"\u003erequired error\u003c/p\u003e\n\u003cinput type=\"password\" ngModel name=\"certainPassword\" #certainPassword=\"ngModel\" [equalTo]=\"password\"/\u003e\n\u003cp *ngIf=\"certainPassword.errors?.equalTo\"\u003eequalTo error\u003c/p\u003e\n```\n\n### notEqualTo\n\n```html\n\u003cinput type=\"text\" ngModel name=\"password\" #password=\"ngModel\" required/\u003e\n\u003cp *ngIf=\"password.errors?.required\"\u003erequired error\u003c/p\u003e\n\u003cinput type=\"password\" ngModel name=\"certainPassword\" #certainPassword=\"ngModel\" [notEqualTo]=\"password\"/\u003e\n\u003cp *ngIf=\"certainPassword.errors?.equalTo\"\u003eequalTo error\u003c/p\u003e\n```\n\n## model driven\n\nimport `ReactiveFormsModule` in *app.module.ts*\n\n```javascript\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n    imports: [BrowserModule, ReactiveFormsModule],\n    declarations: [AppComponent],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nimport `CustomValidators` in *app.component.ts*\n\n```javascript\nimport { Component } from '@angular/core';\nimport { FormGroup, FormControl } from '@angular/forms';\nimport { CustomValidators } from 'ng2-validation';\n\n@Component({\n    selector: 'app',\n    template: require('./app.html')\n})\nexport class AppComponent {\n    form: FormGroup;\n\n    constructor() {\n        this.form = new FormGroup({\n            field: new FormControl('', CustomValidators.range([5, 9]))\n        });\n    }\n}\n```\n\n```html\n\u003cinput type=\"text\" formControlName=\"field\"/\u003e\n\u003cp *ngIf=\"demoForm.from.controls.field.errors?.rangeLength\"\u003eerror message\u003c/p\u003e\n```\n\n### rangeLength\n\n```javascript\nnew FormControl('', CustomValidators.rangeLength([5, 9]))\n```\n\n### min\n\n```javascript\nnew FormControl('', CustomValidators.min(10))\n```\n\n### gt\n\n```javascript\nnew FormControl('', CustomValidators.gt(10))\n```\n\n### max\n\n```javascript\nnew FormControl('', CustomValidators.max(20))\n```\n\n### lt\n\n```javascript\nnew FormControl('', CustomValidators.lt(20))\n```\n\n### range\n\n```javascript\nnew FormControl('', CustomValidators.range([10, 20]))\n```\n\n### digits\n\n```javascript\nnew FormControl('', CustomValidators.digits)\n```\n\n### number\n\n```javascript\nnew FormControl('', CustomValidators.number)\n```\n\n### url\n\n```javascript\nnew FormControl('', CustomValidators.url)\n```\n\n### email\n\n```javascript\nnew FormControl('', CustomValidators.email)\n```\n\n### date\n\n```javascript\nnew FormControl('', CustomValidators.date)\n```\n\n### minDate\n\n```javascript\nnew FormControl('', CustomValidators.minDate('2016-09-09'))\n```\n\n### maxDate\n\n```javascript\nnew FormControl('', CustomValidators.maxDate('2016-09-09'))\n```\n\n### dateISO\n\n```javascript\nnew FormControl('', CustomValidators.dateISO)\n```\n\n### creditCard\n\n```javascript\nnew FormControl('', CustomValidators.creditCard)\n```\n\n### json\n\n```javascript\nnew FormControl('', CustomValidators.json)\n```\n\n### base64\n\n```javascript\nnew FormControl('', CustomValidators.base64)\n```\n\n### phone\n\n```javascript\nnew FormControl('', CustomValidators.phone('zh-CN'))\n```\n\n### uuid\n\n```javascript\nnew FormControl('', CustomValidators.uuid('3'))\n```\n\n### equal\n\n```javascript\nnew FormControl('', CustomValidators.equal('xxx'))\n```\n\n### notEqual\n\n```javascript\nnew FormControl('', CustomValidators.notEqual('xxx'))\n```\n\n### equalTo\n\n```javascript\nlet password = new FormControl('', Validators.required);\nlet certainPassword = new FormControl('', CustomValidators.equalTo(password));\n\nthis.form = new FormGroup({\n  password: password,\n  certainPassword: certainPassword\n});\n```\n\n```html\n\u003cform [formGroup]=\"form\"\u003e\n  \u003cinput type=\"password\" formControlName=\"password\"/\u003e\n  \u003cp *ngIf=\"form.controls.password.errors?.required\"\u003erequired error\u003c/p\u003e\n  \u003cinput type=\"password\" formControlName=\"certainPassword\"/\u003e\n  \u003cp *ngIf=\"form.controls.certainPassword.errors?.equalTo\"\u003eequalTo error\u003c/p\u003e\n\u003c/form\u003e\n```\n\n### notEqualTo\n\n```javascript\nlet password = new FormControl('', Validators.required);\nlet certainPassword = new FormControl('', CustomValidators.notEqualTo(password));\n\nthis.form = new FormGroup({\n  password: password,\n  certainPassword: certainPassword\n});\n```\n\n```html\n\u003cform [formGroup]=\"form\"\u003e\n  \u003cinput type=\"password\" formControlName=\"password\"/\u003e\n  \u003cp *ngIf=\"form.controls.password.errors?.required\"\u003erequired error\u003c/p\u003e\n  \u003cinput type=\"password\" formControlName=\"certainPassword\"/\u003e\n  \u003cp *ngIf=\"form.controls.certainPassword.errors?.notEqualTo\"\u003enotEqualTo error\u003c/p\u003e\n\u003c/form\u003e\n```\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frocity%2Fng2-validation-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frocity%2Fng2-validation-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frocity%2Fng2-validation-clone/lists"}