{"id":19058907,"url":"https://github.com/NationalBankBelgium/ngx-form-errors","last_synced_at":"2025-04-18T00:32:35.397Z","repository":{"id":33861700,"uuid":"159490490","full_name":"NationalBankBelgium/ngx-form-errors","owner":"NationalBankBelgium","description":"Display form validation errors for Angular Reactive forms","archived":false,"fork":false,"pushed_at":"2024-09-23T09:33:07.000Z","size":3041,"stargazers_count":11,"open_issues_count":6,"forks_count":8,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-11-08T12:14:16.813Z","etag":null,"topics":["angular","angular-reactive-forms","reactive-forms"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NationalBankBelgium.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-11-28T11:20:19.000Z","updated_at":"2024-10-15T03:25:47.000Z","dependencies_parsed_at":"2023-12-14T10:29:55.455Z","dependency_job_id":"ab2cca5b-5b3d-45c9-91ab-bbfe38c8b97d","html_url":"https://github.com/NationalBankBelgium/ngx-form-errors","commit_stats":{"total_commits":42,"total_committers":7,"mean_commits":6.0,"dds":"0.26190476190476186","last_synced_commit":"0e9cca2ea0e5168dd49d1d1610d4cafe2f5169ac"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NationalBankBelgium%2Fngx-form-errors","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NationalBankBelgium%2Fngx-form-errors/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NationalBankBelgium%2Fngx-form-errors/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NationalBankBelgium%2Fngx-form-errors/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NationalBankBelgium","download_url":"https://codeload.github.com/NationalBankBelgium/ngx-form-errors/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223681149,"owners_count":17184946,"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","angular-reactive-forms","reactive-forms"],"created_at":"2024-11-09T00:01:38.348Z","updated_at":"2024-11-09T00:02:13.959Z","avatar_url":"https://github.com/NationalBankBelgium.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"\u003ch1 align=\"center\"\u003e\n   ngx-form-errors\n\u003c/h1\u003e\n\n\u003e An [Angular](https://angular.io) (6+) library to handle validation messages for Reactive Forms in a simple and centralized way\n\n[![NPM version](https://img.shields.io/npm/v/@nationalbankbelgium/ngx-form-errors.svg)](https://www.npmjs.com/package/@nationalbankbelgium/ngx-form-errors)\n[![npm](https://img.shields.io/npm/dm/@nationalbankbelgium/ngx-form-errors.svg)](https://www.npmjs.com/package/@nationalbankbelgium/ngx-form-errors)\n[![Build Status](https://github.com/NationalBankBelgium/ngx-form-errors/workflows/ci/badge.svg)](https://github.com/NationalBankBelgium/ngx-form-errors/actions?query=workflow%3Aci)\n[![Coverage Status](https://coveralls.io/repos/github/NationalBankBelgium/ngx-form-errors/badge.svg?branch=master)](https://coveralls.io/github/NationalBankBelgium/ngx-form-errors?branch=master)\n[![Dependency Status](https://david-dm.org/NationalBankBelgium/ngx-form-errors.svg)](https://david-dm.org/NationalBankBelgium/ngx-form-errors)\n[![devDependency Status](https://david-dm.org/NationalBankBelgium/ngx-form-errors/dev-status.svg)](https://david-dm.org/NationalBankBelgium/ngx-form-errors#info=devDependencies)\n[![taylor swift](https://img.shields.io/badge/secured%20by-taylor%20swift-brightgreen.svg)](https://twitter.com/SwiftOnSecurity)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![License](https://img.shields.io/cocoapods/l/AFNetworking.svg)](LICENSE)\n\nNgxFormErrors is heavily inspired in these projects:\n\n- [valdr](https://github.com/netceteragroup/valdr): a model centric approach to AngularJS form validation\n- [ngx-errors](https://github.com/UltimateAngular/ngx-errors): a declarative validation errors library for Angular Reactive Forms\n- [ngx-valdemort](https://github.com/Ninja-Squad/ngx-valdemort): consistent validation error messages for Angular Reactive forms\n\n## Why NgxFormErrors?\n\nLet's just have a look at the following example:\n\n### Plain Reactive Forms approach\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cinput type=\"text\" formControlName=\"foo\" /\u003e\n\n\u003c!-- You need to add an element for each and every error to display a different message --\u003e\n\u003cdiv *ngIf=\"form.get('foo').hasError('required') \u0026\u0026 form.get('foo').touched\"\u003e\n\tField is required\n\u003c/div\u003e\n\u003cdiv *ngIf=\"form.get('foo').hasError('minlength') \u0026\u0026 form.get('foo').dirty\"\u003e\n\tMin length is 5\n\u003c/div\u003e\n\u003cdiv *ngIf=\"form.get('foo').hasError('pattern') \u0026\u0026 form.get('foo').dirty\"\u003e\n\tField must contain at least one uppercase, one lowercase, and one number\n\u003c/div\u003e\n```\n\nThis easily becomes messy and cumbersome as soon as you have multiple fields. And... it is definitely not DRY :-1:\n\n### NgxFormErrors approach\n\nYour component template is cleaner :wink:\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003cinput type=\"text\" formControlName=\"foo\" /\u003e\n\u003c!--or--\u003e\n\u003cinput type=\"text\" [formControl]=\"formGroup.get('foo')\" /\u003e\n\n\u003c!-- ngxFormErrors creates dynamically an Error component (that you define) displaying all the different validation errors --\u003e\n\u003cng-template ngxFormErrors=\"foo\"\u003e\u003c/ng-template\u003e\n```\n\nYou decide how to display the messages by defining your own Error component :sunglasses:\n\n\u003c!-- prettier-ignore --\u003e\n```html\n\u003c!-- Error component's template --\u003e\n\n\u003c!-- you can simply display the message 'as is' --\u003e\n\u003cdiv *ngFor=\"let error of errors\" class=\"awesome-error-message\"\u003e\n\t{{ error.message }}\n\u003c/div\u003e\n\n\u003c!-- or you can use the error's data/properties to do something fancy --\u003e\n\u003cdiv *ngFor=\"let error of errors\" [ngClass]=\"getErrorClass(error)\"\u003e\n\t{{ constructDisplayedErrorMessage(error) }}\n\u003c/div\u003e\n```\n\nAnd the messages are centralized in a service :astonished:\n\n\u003c!-- prettier-ignore --\u003e\n```typescript\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { NgxFormErrorsMessageService, NgxFormErrorsModule } from \"@nationalbankbelgium/ngx-form-errors\";\n\n@NgModule({\n\tdeclarations: [AppComponent, YourCustomErrorComponent],\n\timports: [\n\t\tFormsModule,\n\t\tReactiveFormsModule,\n\t\tNgxFormErrorsModule.forRoot({\n\t\t\tformErrorComponent: YourCustomErrorComponent // your own Error component\n\t\t})\n\t],\n\tentryComponents: [YourCustomErrorComponent], // add the Error component here so it can be created dynamically\n\tbootstrap: [AppComponent]\n})\nexport class AppModule {\n\tpublic constructor(formErrorsMessageService: NgxFormErrorsMessageService) {\n\t\t// add the different validation messages to the NgxFormErrorsMessageService\n\t\tformErrorsMessageService.addErrorMessages({\n\t\t\trequired: \"Field is required\",\n\t\t\tminlength: \"Min length is 5\",\n\t\t\t\"fooField.pattern\": \"Field must contain at least one uppercase, one lowercase, and one number\"\n\t\t});\n\n\t\t// optionally, add the field names to the NgxFormErrorsMessageService\n\t\t// so you can display this name in the validation message instead of the real field name!\n\t\tformErrorsMessageService.addFieldNames({\n\t\t\tfooField: \"Dummy foo field\"\n\t\t});\n\t}\n}\n```\n\n## Installation\n\nInstall NgxFormErrors from npm:\n\n```\nnpm install @nationalbankbelgium/ngx-form-errors\n```\n\n## NgxFormErrors packaging\n\nNgxFormErrors is built with [ng-packagr](https://github.com/ng-packagr/ng-packagr) which means that the final package implements the [Angular Package Format](https://docs.google.com/document/d/1CZC2rcpxffTDfRDs6p1cfbmKNLA6x5O-NtkJglDaBVs/preview) providing the following bundles:\n\n- FESM2015\n- FESM5\n- ESM2015\n- ESM5\n- UMD\n\nSo it can be consumed by [Angular CLI](https://github.com/angular/angular-cli), [Webpack](https://github.com/webpack/webpack) or [SystemJS](https://github.com/systemjs/systemjs).\n\n## Releases\n\nNgxFormErrors releases are available on npm: https://www.npmjs.com/settings/nationalbankbelgium/packages\n\n## Contributing\n\nPlease follow our [contribution guidelines](/CONTRIBUTING.md).\n\nTo know how to release NgxFormErrors, refer to [this page](/RELEASE.md).\n\n## Authors\n\n### Christopher Cortes\n\n- [@GitHub](https://github.com/christophercr)\n\n### Alexis Georges\n\n- [@GitHub](https://github.com/SuperITMan)\n\n## License\n\nThis project and all associated source code is licensed under the terms of the [MIT License](/LICENSE).\n\n## Documentation\n\n- [Developer Guide](/docs/DEV_GUIDE.md)\n\n## Thank you notes :)\n\nWe'd like to thank the following companies who support the open source community with great tools and platforms.\n\n### Jetbrains\n\nWe're supported by [Jetbrains](https://www.jetbrains.com) and their awesome [support for open source](https://www.jetbrains.com/buy/opensource/), thanks to which we are able to use the best products on the market to work on this open source project!\n\n\u003ca href=\"https://www.jetbrains.com\"\u003e\u003cimg src=\"http://www.underconsideration.com/brandnew/archives/jetbrains_logo_detail.jpg\" width=\"144px\"\u003e\u003c/a\u003e\n\n### GitHub Actions\n\nWe're supported by [GitHub Actions](https://github.com/features/actions)\n\n\u003ca href=\"https://github.com/features/actions\"\u003e\u003cimg src=\"https://github.githubassets.com/images/modules/site/features/actions-icon-actions.svg\" width=\"144px\"\u003e\u003c/a\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNationalBankBelgium%2Fngx-form-errors","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNationalBankBelgium%2Fngx-form-errors","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNationalBankBelgium%2Fngx-form-errors/lists"}