{"id":15101657,"url":"https://github.com/third774/ng-bootstrap-form-validation","last_synced_at":"2025-09-26T22:31:48.307Z","repository":{"id":46562924,"uuid":"86281053","full_name":"third774/ng-bootstrap-form-validation","owner":"third774","description":"An Angular Module for easy data driven (reactive) form validation","archived":true,"fork":false,"pushed_at":"2021-10-05T18:41:18.000Z","size":3344,"stargazers_count":59,"open_issues_count":41,"forks_count":42,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-09-26T18:27:33.968Z","etag":null,"topics":["angular","bootstrap","form","hacktoberfest","validation"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/ng-bootstrap-form-validation","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/third774.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":"2017-03-27T02:11:26.000Z","updated_at":"2024-04-11T06:23:42.000Z","dependencies_parsed_at":"2022-08-20T17:21:14.165Z","dependency_job_id":null,"html_url":"https://github.com/third774/ng-bootstrap-form-validation","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/third774%2Fng-bootstrap-form-validation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/third774%2Fng-bootstrap-form-validation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/third774%2Fng-bootstrap-form-validation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/third774%2Fng-bootstrap-form-validation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/third774","download_url":"https://codeload.github.com/third774/ng-bootstrap-form-validation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234356525,"owners_count":18819381,"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","bootstrap","form","hacktoberfest","validation"],"created_at":"2024-09-25T18:27:55.891Z","updated_at":"2025-09-26T22:31:47.831Z","avatar_url":"https://github.com/third774.png","language":"TypeScript","readme":"# ng-bootstrap-form-validation\n\nAn Angular module that makes Bootstrap form validation easy.\n\n[![Build Status](https://travis-ci.org/third774/ng-bootstrap-form-validation.svg?branch=master)](https://travis-ci.org/third774/ng-bootstrap-form-validation)\n[![Dependencies](https://david-dm.org/third774/ng-bootstrap-form-validation.svg)](https://david-dm.org/third774/ng-bootstrap-form-validation.svg)\n[![npm downloads](https://img.shields.io/npm/dm/ng-bootstrap-form-validation.svg)](http://npm-stat.com/charts.html?package=ng-bootstrap-form-validation)\n\nCheck out [the demo](https://third774.github.io/ng-bootstrap-form-validation)!\n\n*Note: v9.0.0 is out and supports Angular 9!*\n\n## Install\n\n1) Install by running `npm install ng-bootstrap-form-validation --save`\n\n2) Add `NgBootstrapFormValidationModule.forRoot()` to your `app.module.ts` imports:\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule , ReactiveFormsModule} from '@angular/forms';\nimport { AppComponent } from './app.component';\n\nimport { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    ReactiveFormsModule,\n    NgBootstrapFormValidationModule.forRoot()\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n3) Add `NgBootstrapFormValidationModule` to other modules in your application:\n\n```ts\nimport { NgModule } from '@angular/core';\nimport { OtherComponent } from './other.component';\n\nimport { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';\n\n@NgModule({\n  declarations: [\n    OtherComponent\n  ],\n  imports: [\n    NgBootstrapFormValidationModule\n  ]\n})\nexport class OtherModule { }\n```\n\n**Note:**\nIf you are only using a single (`app`) module, then you will need to import both:\n\n```ts\nimport { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    ...\n    NgBootstrapFormValidationModule.forRoot(),\n    NgBootstrapFormValidationModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n```\n\n## Basics\n\n### Default Errors\n\nBy 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.\n\n### Usage\nng-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.\n\nThe `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`.\n\nValidation messages appear when an input is `dirty`, `touched`, and has errors.\n\nSubmitting 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.\n\n`basic-example.component.ts`\n\n```ts\nimport {Component, OnInit} from \"@angular/core\";\nimport {FormControl, FormGroup, Validators} from \"@angular/forms\";\n\n@Component({\n  selector: 'app-basic-example',\n  templateUrl: './basic-example.component.html',\n  styleUrls: ['./basic-example.component.css']\n})\nexport class BasicExampleComponent implements OnInit {\n\n  formGroup: FormGroup;\n\n  ngOnInit() {\n    this.formGroup = new FormGroup({\n      Email: new FormControl('', [\n        Validators.required,\n        Validators.pattern(/^[a-zA-Z0-9.!#$%\u0026’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/)\n      ]),\n      Password: new FormControl('', [\n        Validators.required,\n        Validators.minLength(8),\n        Validators.maxLength(20)\n      ])\n    });\n  }\n\n  onSubmit() {\n    console.log(this.formGroup);\n  }\n\n  onReset() {\n    this.formGroup.reset();\n  }\n\n}\n```\n\n`basic-example.component.html`\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-md-6 col-md-offset-3\"\u003e\n    \u003cform [formGroup]=\"formGroup\" (validSubmit)=\"onSubmit()\"\u003e\n      \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"control-label\"\u003eEmail\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control\" formControlName=\"Email\"\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"control-label\"\u003ePassword\u003c/label\u003e\n        \u003cinput type=\"password\" class=\"form-control\" formControlName=\"Password\"\u003e\n      \u003c/div\u003e\n      \u003cbutton class=\"btn btn-default\" type=\"button\" (click)=\"onReset()\"\u003eReset\u003c/button\u003e\n      \u003cbutton class=\"btn btn-primary pull-right\" type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### Custom error message placement\n\nNote: the `\u003cbfv-messsages\u003e\u003c/bfv-messages\u003e` component still *must* be placed within the `\u003cdiv class=\"form-group\"\u003e`.\n\n`basic-example.component.html`\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-md-6 col-md-offset-3\"\u003e\n    \u003cform class=\"form-horizontal\" [formGroup]=\"formGroup\" (validSubmit)=\"onSubmit()\"\u003e\n      \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"control-label col-sm-2\"\u003eEmail\u003c/label\u003e\n        \u003cdiv class=\"col-sm-10\"\u003e\n          \u003cinput type=\"text\" class=\"form-control\" formControlName=\"Email\"\u003e\n          \u003cbfv-messages\u003e\u003c/bfv-messages\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"control-label col-sm-2\"\u003ePassword\u003c/label\u003e\n        \u003cdiv class=\"col-sm-10\"\u003e\n          \u003cinput type=\"password\" class=\"form-control\" formControlName=\"Password\"\u003e\n          \u003cbfv-messages\u003e\u003c/bfv-messages\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cbutton class=\"btn btn-default\" type=\"button\" (click)=\"onReset()\"\u003eReset\u003c/button\u003e\n      \u003cbutton class=\"btn btn-primary pull-right\" type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Custom Error Messages\n\n### Module Level Custom Errors\n\nYou 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\n\n`custom-errors.ts`\n```ts\nimport {ErrorMessage} from \"ng-bootstrap-form-validation\";\n\nexport const CUSTOM_ERRORS: ErrorMessage[] = [\n  {\n    error: \"required\",\n    format: requiredFormat\n  }, {\n    error: \"email\",\n    format: emailFormat\n  }\n];\n\nexport function requiredFormat(label: string, error: any): string {\n  return `${label} IS MOST DEFINITELY REQUIRED!`;\n}\n\nexport function emailFormat(label: string, error: any): string {\n  return `${label} doesn't look like a valid email address.`;\n}\n```\n\n`app.module.ts`\n```ts\nimport {BrowserModule} from \"@angular/platform-browser\";\nimport {NgModule} from \"@angular/core\";\nimport {FormsModule, ReactiveFormsModule} from \"@angular/forms\";\nimport { HttpClientModule } from '@angular/common/http';\nimport {\n  NgBootstrapFormValidationModule,\n  CUSTOM_ERROR_MESSAGES\n} from \"ng-bootstrap-form-validation\";\nimport {AppComponent} from \"./app.component\";\nimport {CUSTOM_ERRORS} from \"./custom-errors\";\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    ReactiveFormsModule,\n    NgBootstrapFormValidationModule.forRoot(),\n    HttpClientModule\n  ],\n  providers: [{\n    provide: CUSTOM_ERROR_MESSAGES,\n    useValue: CUSTOM_ERRORS,\n    multi: true\n  }],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n### Form Control Specific Custom Errors\n\nIn addition to providing custom errors at the top level using the `.forRoot()` method,\nyou can provide custom error messages to a specific control by binding to the\n`customErrorMessages` directive on the `.form-group` element. Modifying the basic\nexample 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.\n\n`custom-error-example.component.ts`\n```ts\nimport {Component, OnInit} from \"@angular/core\";\nimport {FormControl, FormGroup, Validators} from \"@angular/forms\";\nimport {ErrorMessage} from \"../../lib/Models/ErrorMessage\";\n\n@Component({\n  selector: 'app-custom-errors',\n  templateUrl: './custom-errors.component.html',\n  styleUrls: ['./custom-errors.component.css']\n})\nexport class CustomErrorsComponent implements OnInit {\n\n  formGroup: FormGroup;\n\n  customErrorMessages: ErrorMessage[] = [\n    {\n      error: 'required',\n      format: (label, error) =\u003e `${label.toUpperCase()} IS DEFINITELY REQUIRED!`\n    }, {\n      error: 'pattern',\n      format: (label, error) =\u003e `${label.toUpperCase()} DOESN'T LOOK RIGHT...`\n    }\n  ];\n\n  ngOnInit() {\n    this.formGroup = new FormGroup({\n      Email: new FormControl('', [\n        Validators.required,\n        Validators.pattern(/^[a-zA-Z0-9.!#$%\u0026’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$/)\n      ]),\n      Password: new FormControl('', [\n        Validators.required,\n        Validators.minLength(8),\n        Validators.maxLength(20)\n      ])\n    });\n  }\n\n  onSubmit() {\n    console.log(this.formGroup);\n  }\n\n  onReset() {\n    this.formGroup.reset();\n  }\n\n}\n```\n\n`custom-error-example.component.html`\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"col-md-6 col-md-offset-3\"\u003e\n    \u003cform [formGroup]=\"formGroup\" (validSubmit)=\"onSubmit()\"\u003e\n      \u003cdiv class=\"form-group\" [customErrorMessages]=\"customErrorMessages\"\u003e\n        \u003clabel class=\"control-label\"\u003eEmail\u003c/label\u003e\n        \u003cinput type=\"text\" class=\"form-control\" formControlName=\"Email\"\u003e\n      \u003c/div\u003e\n      \u003cdiv class=\"form-group\"\u003e\n        \u003clabel class=\"control-label\"\u003ePassword\u003c/label\u003e\n        \u003cinput type=\"password\" class=\"form-control\" formControlName=\"Password\"\u003e\n      \u003c/div\u003e\n      \u003cbutton class=\"btn btn-default\" type=\"button\" (click)=\"onReset()\"\u003eReset\u003c/button\u003e\n      \u003cbutton class=\"btn btn-primary pull-right\" type=\"submit\"\u003eSubmit\u003c/button\u003e\n    \u003c/form\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Roadmap\n* Add out of the box support for `ng2-validation` validators\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthird774%2Fng-bootstrap-form-validation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthird774%2Fng-bootstrap-form-validation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthird774%2Fng-bootstrap-form-validation/lists"}