{"id":23213795,"url":"https://github.com/nitin27may/ngxvalidations","last_synced_at":"2025-08-19T05:33:14.931Z","repository":{"id":38515406,"uuid":"273072904","full_name":"nitin27may/NgxValidations","owner":"nitin27may","description":"A npm package which will reduce repetitive codes for form validations for Angular reactive forms","archived":false,"fork":false,"pushed_at":"2022-06-03T03:15:29.000Z","size":625,"stargazers_count":0,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-30T04:49:02.036Z","etag":null,"topics":["angular","form-validation","forms","module","npm","reactive-forms","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ngx-validations","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/nitin27may.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-17T20:34:14.000Z","updated_at":"2020-07-27T02:19:23.000Z","dependencies_parsed_at":"2022-08-23T21:01:28.406Z","dependency_job_id":null,"html_url":"https://github.com/nitin27may/NgxValidations","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin27may%2FNgxValidations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin27may%2FNgxValidations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin27may%2FNgxValidations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin27may%2FNgxValidations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin27may","download_url":"https://codeload.github.com/nitin27may/NgxValidations/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230326767,"owners_count":18209050,"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":["angular","form-validation","forms","module","npm","reactive-forms","typescript"],"created_at":"2024-12-18T19:19:20.286Z","updated_at":"2024-12-18T19:19:20.754Z","avatar_url":"https://github.com/nitin27may.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgxValidations\n\nForms bring life to our web applications. It’s how we capture user input and make our applications useful. \nIn every scenario, developers end with writing a lot html code just to show the relative messages based on the type of input validation error. We have created a validation module which will have all these logic to validate the input and display relative message from it. \n This library is Ivy Compatible and is tested against an Angular 8, 9 app. \n\n* It is developed using `Angular \u003e=9.0.0` and its newly introduced `ng g library` schematics.\n* This library is part of NgxValidations project and it is generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.6.\n* Library location: `projects/ngx-validations` directory of this repository.\n\n## Validation List List \n\n| Validators            | Validator Methods             |                 Description                     |  \n| --------------------- |-------------------------------| :---------------------------------------------: |\n| `required`            | `Validators.required`            | to validated and display required error         | \n| `minLength`           | `Validators.minLength(length)`            | to validated and display min length error  | \n| `maxLength`           | `Validators.maxLength(35)`            | to validated and display max length error  | \n| `emailValidator`      | `this.validationService.emailValidator`            | to validate if entered email is valid | \n| `mobileValidator`     | `this.validationService.mobileValidator`            |  to validate if entered email is valid  | \n| `postalCodeValidator` | `this.validationService.postalCodeValidator`            |  to validate if entered postal is valid (North America postal code)  | \n\n\n### Upcoming validators\n\n| selector                |                         Description                               |  \n| ------------------------| :---------------------------------------------------------------: |\n| `passwordStrength`      | it will check if password strength is strong or not               | \n| `passwordMatch`         | it will ccompare password and confirm password and display error if not matched   | \n| `dateComparison`        | it will validated that to date is greater than from date  | \n\n\n\n\n## Examples/Demo\n\n* A simple Example can be found under `src/app` directory of this repository. \n\n## Installation\n\n`npm i ngx-validations`\n\n## Usage\n\n1) Register the `NgxValidationsModule` in your app module.\n \u003e `import { NgxValidationsModule } from \"ng-validations\";`\n\n ```typescript\n import { BrowserModule } from \"@angular/platform-browser\";\nimport { NgModule } from \"@angular/core\";\n\nimport { AppRoutingModule } from \"./app-routing.module\";\nimport { AppComponent } from \"./app.component\";\nimport { NgxValidationsModule } from \"ngx-validations\";\nimport { CommonModule } from \"@angular/common\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\n@NgModule({\n  declarations: [AppComponent],\n  imports: [\n    BrowserModule,\n    CommonModule,\n    ReactiveFormsModule,\n    AppRoutingModule,\n    NgxValidationsModule,\n  ],\n  providers: [],\n  bootstrap: [AppComponent],\n})\nexport class AppModule {}\n\n ```\n\n 2) Use service `(NgxValidationsService)` to get additional method of validaion in your component.\n\n```typescript\nimport { Component, OnInit } from \"@angular/core\";\nimport { FormBuilder, FormGroup, Validators } from \"@angular/forms\";\nimport { NgxValidationsService } from \"ngx-validations\";\n\n@Component({\n  selector: \"ngx-val-root\",\n  templateUrl: \"./app.component.html\",\n  styleUrls: [\"./app.component.css\"],\n})\nexport class AppComponent implements OnInit {\n  userForm: FormGroup;\n  title = \"Ngx Validations Library\";\n  constructor(\n    private formBuilder: FormBuilder,\n    private validationService: NgxValidationsService\n  ) {}\n\n  createForm() {\n    this.userForm = this.formBuilder.group({\n      FirstName: [\n        \"\",\n        [\n          Validators.required,\n          Validators.minLength(2),\n          Validators.maxLength(35),\n        ],\n      ],\n      LastName: [\n        \"\",\n        [\n          Validators.required,\n          Validators.minLength(2),\n          Validators.maxLength(35),\n        ],\n      ],\n      Email: [\"\", [Validators.required, this.validationService.emailValidator]],\n      Mobile: [\n        \"\",\n        [Validators.required, this.validationService.mobileValidator],\n      ],\n      PostalCode: [\n        \"\",\n        [Validators.required, this.validationService.postalCodeValidator],\n      ],\n    });\n  }\n\n  reset() {\n    this.createForm();\n  }\n  ngOnInit() {\n    this.createForm();\n  }\n}\n\n```\n3) Use custom element `\u003cngx-validation-message\u003e` to display all error messages for a contol.\n\n```typescript\n      \u003cform [formGroup]=\"userForm\"\u003e\n        \u003cdiv class=\"form-row mt-4\"\u003e\n          \u003cdiv class=\"col-sm-6 pb-3\"\u003e\n            \u003clabel for=\"exampleFirst\"\u003eFirst Name\u003c/label\u003e\n            \u003cinput type=\"text\" class=\"form-control\" formControlName=\"FirstName\"\u003e\n            \u003cngx-validation-message [control]=\"userForm.controls.FirstName\"\u003e\u003c/ngx-validation-message\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col-sm-6 pb-3\"\u003e\n            \u003clabel for=\"exampleLast\"\u003eLast Name\u003c/label\u003e\n            \u003cinput type=\"text\" class=\"form-control\" formControlName=\"LastName\"\u003e\n            \u003cngx-validation-message [control]=\"userForm.controls.LastName\"\u003e\u003c/ngx-validation-message\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col-sm-5 pb-3\"\u003e\n            \u003clabel for=\"exampleAccount\"\u003eEmail \u003c/label\u003e\n            \u003cinput type=\"text\" class=\"form-control\" formControlName=\"Email\"\u003e\n            \u003cngx-validation-message [control]=\"userForm.controls.Email\"\u003e\u003c/ngx-validation-message\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col-sm-3 pb-3\"\u003e\n            \u003clabel for=\"exampleCtrl\"\u003eMobile #\u003c/label\u003e\n            \u003cinput type=\"text\" class=\"form-control\" formControlName=\"Mobile\"\u003e\n            \u003cngx-validation-message [control]=\"userForm.controls.Mobile\"\u003e\u003c/ngx-validation-message\u003e\n          \u003c/div\u003e\n          \u003cdiv class=\"col-sm-4 pb-3\"\u003e\n            \u003clabel for=\"exampleZip\"\u003ePostal Code\u003c/label\u003e\n            \u003cinput type=\"text\" class=\"form-control\" formControlName=\"PostalCode\"\u003e\n            \u003cngx-validation-message [control]=\"userForm.controls.PostalCode\"\u003e\u003c/ngx-validation-message\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/form\u003e\n\n```\n\n## Running the example in local env\n\n* `npm i`\n* Run `ng serve` for a dev server and running the demo app. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n\n## Build the NgxValidations module\n\nRun `ng build NgxValidations` to build the library. The build artifacts will be stored in the `dist/ngx-validations` directory. Use the `--prod` flag for a production build.\n\n\n## Credits\n\nI want to thanks entire [Angular](https://angular.io) team for creating this awesome framework.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin27may%2Fngxvalidations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin27may%2Fngxvalidations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin27may%2Fngxvalidations/lists"}