An Angular module that makes Bootstrap form validation easy.
Check out the demo!
-
Install by running
npm install ng-bootstrap-form-validation --save
-
Add
NgBootstrapFormValidationModule.forRoot()
to yourapp.module.ts
imports:
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 {
}
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.
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
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
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form [formGroup]="formGroup" (validSubmit)="onSubmit()">
<div class="form-group">
<label class="control-label">Email</label>
<input type="text" class="form-control" formControlName="Email">
</div>
<div class="form-group">
<label class="control-label">Password</label>
<input type="password" class="form-control" formControlName="Password">
</div>
<button class="btn btn-default" type="button" (click)="onReset()">Reset</button>
<button class="btn btn-primary pull-right" type="submit">Submit</button>
</form>
</div>
</div>
Optionally, you can pass an ErrorMessage
array into the .forRoot()
method in your app.module.ts
to provide custom errors across your entire app. In order for this to be AOT compatable, the function definitions must be exported. see below for an example
custom-errors.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
import {BrowserModule} from "@angular/platform-browser";
import {NgModule} from "@angular/core";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import {NgBootstrapFormValidationModule} 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(CUSTOM_ERRORS),
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
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
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
<div class="row">
<div class="col-md-6 col-md-offset-3">
<form [formGroup]="formGroup" (validSubmit)="onSubmit()">
<div class="form-group" [customErrorMessages]="customErrorMessages">
<label class="control-label">Email</label>
<input type="text" class="form-control" formControlName="Email">
</div>
<div class="form-group">
<label class="control-label">Password</label>
<input type="password" class="form-control" formControlName="Password">
</div>
<button class="btn btn-default" type="button" (click)="onReset()">Reset</button>
<button class="btn btn-primary pull-right" type="submit">Submit</button>
</form>
</div>
</div>
- Add out of the box support for
ng2-validation
validators