https://github.com/nitin27may/ngxvalidations
A npm package which will reduce repetitive codes for form validations for Angular reactive forms
https://github.com/nitin27may/ngxvalidations
angular form-validation forms module npm reactive-forms typescript
Last synced: 10 months ago
JSON representation
A npm package which will reduce repetitive codes for form validations for Angular reactive forms
- Host: GitHub
- URL: https://github.com/nitin27may/ngxvalidations
- Owner: nitin27may
- License: mit
- Created: 2020-06-17T20:34:14.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-06-03T03:15:29.000Z (about 4 years ago)
- Last Synced: 2024-11-30T04:49:02.036Z (over 1 year ago)
- Topics: angular, form-validation, forms, module, npm, reactive-forms, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ngx-validations
- Size: 610 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NgxValidations
Forms bring life to our web applications. It’s how we capture user input and make our applications useful.
In 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.
This library is Ivy Compatible and is tested against an Angular 8, 9 app.
* It is developed using `Angular >=9.0.0` and its newly introduced `ng g library` schematics.
* This library is part of NgxValidations project and it is generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.6.
* Library location: `projects/ngx-validations` directory of this repository.
## Validation List List
| Validators | Validator Methods | Description |
| --------------------- |-------------------------------| :---------------------------------------------: |
| `required` | `Validators.required` | to validated and display required error |
| `minLength` | `Validators.minLength(length)` | to validated and display min length error |
| `maxLength` | `Validators.maxLength(35)` | to validated and display max length error |
| `emailValidator` | `this.validationService.emailValidator` | to validate if entered email is valid |
| `mobileValidator` | `this.validationService.mobileValidator` | to validate if entered email is valid |
| `postalCodeValidator` | `this.validationService.postalCodeValidator` | to validate if entered postal is valid (North America postal code) |
### Upcoming validators
| selector | Description |
| ------------------------| :---------------------------------------------------------------: |
| `passwordStrength` | it will check if password strength is strong or not |
| `passwordMatch` | it will ccompare password and confirm password and display error if not matched |
| `dateComparison` | it will validated that to date is greater than from date |
## Examples/Demo
* A simple Example can be found under `src/app` directory of this repository.
## Installation
`npm i ngx-validations`
## Usage
1) Register the `NgxValidationsModule` in your app module.
> `import { NgxValidationsModule } from "ng-validations";`
```typescript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NgxValidationsModule } from "ngx-validations";
import { CommonModule } from "@angular/common";
import { ReactiveFormsModule } from "@angular/forms";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
CommonModule,
ReactiveFormsModule,
AppRoutingModule,
NgxValidationsModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
2) Use service `(NgxValidationsService)` to get additional method of validaion in your component.
```typescript
import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { NgxValidationsService } from "ngx-validations";
@Component({
selector: "ngx-val-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent implements OnInit {
userForm: FormGroup;
title = "Ngx Validations Library";
constructor(
private formBuilder: FormBuilder,
private validationService: NgxValidationsService
) {}
createForm() {
this.userForm = this.formBuilder.group({
FirstName: [
"",
[
Validators.required,
Validators.minLength(2),
Validators.maxLength(35),
],
],
LastName: [
"",
[
Validators.required,
Validators.minLength(2),
Validators.maxLength(35),
],
],
Email: ["", [Validators.required, this.validationService.emailValidator]],
Mobile: [
"",
[Validators.required, this.validationService.mobileValidator],
],
PostalCode: [
"",
[Validators.required, this.validationService.postalCodeValidator],
],
});
}
reset() {
this.createForm();
}
ngOnInit() {
this.createForm();
}
}
```
3) Use custom element `` to display all error messages for a contol.
```typescript
First Name
Last Name
Email
Mobile #
Postal Code
```
## Running the example in local env
* `npm i`
* 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.
## Build the NgxValidations module
Run `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.
## Credits
I want to thanks entire [Angular](https://angular.io) team for creating this awesome framework.