Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/third774/ng-bootstrap-form-validation
An Angular Module for easy data driven (reactive) form validation
https://github.com/third774/ng-bootstrap-form-validation
angular bootstrap form hacktoberfest validation
Last synced: 3 months ago
JSON representation
An Angular Module for easy data driven (reactive) form validation
- Host: GitHub
- URL: https://github.com/third774/ng-bootstrap-form-validation
- Owner: third774
- License: mit
- Archived: true
- Created: 2017-03-27T02:11:26.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-10-05T18:41:18.000Z (about 3 years ago)
- Last Synced: 2024-09-21T05:04:51.616Z (3 months ago)
- Topics: angular, bootstrap, form, hacktoberfest, validation
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-bootstrap-form-validation
- Size: 3.19 MB
- Stars: 59
- Watchers: 8
- Forks: 42
- Open Issues: 41
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ng-bootstrap-form-validation
An Angular module that makes Bootstrap form validation easy.
[](https://travis-ci.org/third774/ng-bootstrap-form-validation)
[](https://david-dm.org/third774/ng-bootstrap-form-validation.svg)
[](http://npm-stat.com/charts.html?package=ng-bootstrap-form-validation)
Check out [the demo](https://third774.github.io/ng-bootstrap-form-validation)!
*Note: v9.0.0 is out and supports Angular 9!*
## Install
1) Install by running `npm install ng-bootstrap-form-validation --save`
2) Add `NgBootstrapFormValidationModule.forRoot()` to your `app.module.ts` imports:
```ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule , ReactiveFormsModule} from '@angular/forms';
import { AppComponent } from './app.component';
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
NgBootstrapFormValidationModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
3) Add `NgBootstrapFormValidationModule` to other modules in your application:
```ts
import { NgModule } from '@angular/core';
import { OtherComponent } from './other.component';
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
@NgModule({
declarations: [
OtherComponent
],
imports: [
NgBootstrapFormValidationModule
]
})
export class OtherModule { }
```
**Note:**
If you are only using a single (`app`) module, then you will need to import both:
```ts
import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
NgBootstrapFormValidationModule.forRoot(),
NgBootstrapFormValidationModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
## Basics
### Default Errors
By default, the validators found on the `Validators` class from `@angular/forms` module are handled for you out of the box. All you need to do is import the module.
### Usage
ng-bootstrap-form-validation works by using the `form-group` Bootstrap class on your divs as component selector, and projecting the content into a component which handles form validation feedback for you.
The `has-error` and `has-success` classes are automatically added or removed to your `form-group` based on whether or not the input is valid, and is both `touched` and `dirty`.
Validation messages appear when an input is `dirty`, `touched`, and has errors.
Submitting the form will iterate over all controls and mark them as `touched` and `dirty` to provide feedback to the user. Additionally, there is a `validSubmit` event on forms which you can bind to instead of `submit` to only fire off when the form is actually valid.
`basic-example.component.ts`
```ts
import {Component, OnInit} from "@angular/core";
import {FormControl, FormGroup, Validators} from "@angular/forms";
@Component({
selector: 'app-basic-example',
templateUrl: './basic-example.component.html',
styleUrls: ['./basic-example.component.css']
})
export class BasicExampleComponent implements OnInit {
formGroup: FormGroup;
ngOnInit() {
this.formGroup = new FormGroup({
Email: new FormControl('', [
Validators.required,
Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
]),
Password: new FormControl('', [
Validators.required,
Validators.minLength(8),
Validators.maxLength(20)
])
});
}
onSubmit() {
console.log(this.formGroup);
}
onReset() {
this.formGroup.reset();
}
}
```
`basic-example.component.html`
```html
Email
Password
Reset
Submit
```
#### Custom error message placement
Note: the `` component still *must* be placed within the `
`.
`basic-example.component.html`
```html
Email
Password
Reset
Submit
```
## Custom Error Messages
### Module Level Custom Errors
You can provide an `ErrorMessage` array via the `CUSTOM_ERROR_MESSAGES` multi-provider in your module to provide custom errors across your module/app. In order for this to be AOT compatable, the function definitions **must** be exported. see below for an example
`custom-errors.ts`
```ts
import {ErrorMessage} from "ng-bootstrap-form-validation";
export const CUSTOM_ERRORS: ErrorMessage[] = [
{
error: "required",
format: requiredFormat
}, {
error: "email",
format: emailFormat
}
];
export function requiredFormat(label: string, error: any): string {
return `${label} IS MOST DEFINITELY REQUIRED!`;
}
export function emailFormat(label: string, error: any): string {
return `${label} doesn't look like a valid email address.`;
}
```
`app.module.ts`
```ts
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import { HttpClientModule } from '@angular/common/http';
import {
NgBootstrapFormValidationModule,
CUSTOM_ERROR_MESSAGES
} from "ng-bootstrap-form-validation";
import {AppComponent} from "./app.component";
import {CUSTOM_ERRORS} from "./custom-errors";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
NgBootstrapFormValidationModule.forRoot(),
HttpClientModule
],
providers: [{
provide: CUSTOM_ERROR_MESSAGES,
useValue: CUSTOM_ERRORS,
multi: true
}],
bootstrap: [AppComponent]
})
export class AppModule {
}
```
### Form Control Specific Custom Errors
In addition to providing custom errors at the top level using the `.forRoot()` method,
you can provide custom error messages to a specific control by binding to the
`customErrorMessages` directive on the `.form-group` element. Modifying the basic
example above, we can provide a one time custom error message to a specific `.form-group`. Unlike the global custom error messages, these functions do not need to be individually exported.
`custom-error-example.component.ts`
```ts
import {Component, OnInit} from "@angular/core";
import {FormControl, FormGroup, Validators} from "@angular/forms";
import {ErrorMessage} from "../../lib/Models/ErrorMessage";
@Component({
selector: 'app-custom-errors',
templateUrl: './custom-errors.component.html',
styleUrls: ['./custom-errors.component.css']
})
export class CustomErrorsComponent implements OnInit {
formGroup: FormGroup;
customErrorMessages: ErrorMessage[] = [
{
error: 'required',
format: (label, error) => `${label.toUpperCase()} IS DEFINITELY REQUIRED!`
}, {
error: 'pattern',
format: (label, error) => `${label.toUpperCase()} DOESN'T LOOK RIGHT...`
}
];
ngOnInit() {
this.formGroup = new FormGroup({
Email: new FormControl('', [
Validators.required,
Validators.pattern(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)
]),
Password: new FormControl('', [
Validators.required,
Validators.minLength(8),
Validators.maxLength(20)
])
});
}
onSubmit() {
console.log(this.formGroup);
}
onReset() {
this.formGroup.reset();
}
}
```
`custom-error-example.component.html`
```html
Email
Password
Reset
Submit
```
## Roadmap
* Add out of the box support for `ng2-validation` validators