Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/NationalBankBelgium/ngx-form-errors
Display form validation errors for Angular Reactive forms
https://github.com/NationalBankBelgium/ngx-form-errors
angular angular-reactive-forms reactive-forms
Last synced: about 1 month ago
JSON representation
Display form validation errors for Angular Reactive forms
- Host: GitHub
- URL: https://github.com/NationalBankBelgium/ngx-form-errors
- Owner: NationalBankBelgium
- License: other
- Created: 2018-11-28T11:20:19.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-23T09:33:07.000Z (3 months ago)
- Last Synced: 2024-11-08T12:14:16.813Z (about 1 month ago)
- Topics: angular, angular-reactive-forms, reactive-forms
- Language: TypeScript
- Size: 2.9 MB
- Stars: 11
- Watchers: 7
- Forks: 8
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-form-errors - Display form validation errors for Angular Reactive forms. (Table of contents / Third Party Components)
- awesome-angular - ngx-form-errors - Display form validation errors for Angular Reactive forms. (Table of contents / Third Party Components)
README
ngx-form-errors
> An [Angular](https://angular.io) (6+) library to handle validation messages for Reactive Forms in a simple and centralized way
[](https://www.npmjs.com/package/@nationalbankbelgium/ngx-form-errors)
[](https://www.npmjs.com/package/@nationalbankbelgium/ngx-form-errors)
[](https://github.com/NationalBankBelgium/ngx-form-errors/actions?query=workflow%3Aci)
[](https://coveralls.io/github/NationalBankBelgium/ngx-form-errors?branch=master)
[](https://david-dm.org/NationalBankBelgium/ngx-form-errors)
[](https://david-dm.org/NationalBankBelgium/ngx-form-errors#info=devDependencies)
[](https://twitter.com/SwiftOnSecurity)
[](http://commitizen.github.io/cz-cli/)
[](https://github.com/prettier/prettier)
[](LICENSE)
NgxFormErrors is heavily inspired in these projects:
- [valdr](https://github.com/netceteragroup/valdr): a model centric approach to AngularJS form validation
- [ngx-errors](https://github.com/UltimateAngular/ngx-errors): a declarative validation errors library for Angular Reactive Forms
- [ngx-valdemort](https://github.com/Ninja-Squad/ngx-valdemort): consistent validation error messages for Angular Reactive forms
## Why NgxFormErrors?
Let's just have a look at the following example:
### Plain Reactive Forms approach
```html
Field is required
Min length is 5
Field must contain at least one uppercase, one lowercase, and one number
```
This easily becomes messy and cumbersome as soon as you have multiple fields. And... it is definitely not DRY :-1:
### NgxFormErrors approach
Your component template is cleaner :wink:
```html
```
You decide how to display the messages by defining your own Error component :sunglasses:
```html
{{ constructDisplayedErrorMessage(error) }}
```
And the messages are centralized in a service :astonished:
```typescript
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { NgxFormErrorsMessageService, NgxFormErrorsModule } from "@nationalbankbelgium/ngx-form-errors";
@NgModule({
declarations: [AppComponent, YourCustomErrorComponent],
imports: [
FormsModule,
ReactiveFormsModule,
NgxFormErrorsModule.forRoot({
formErrorComponent: YourCustomErrorComponent // your own Error component
})
],
entryComponents: [YourCustomErrorComponent], // add the Error component here so it can be created dynamically
bootstrap: [AppComponent]
})
export class AppModule {
public constructor(formErrorsMessageService: NgxFormErrorsMessageService) {
// add the different validation messages to the NgxFormErrorsMessageService
formErrorsMessageService.addErrorMessages({
required: "Field is required",
minlength: "Min length is 5",
"fooField.pattern": "Field must contain at least one uppercase, one lowercase, and one number"
});
// optionally, add the field names to the NgxFormErrorsMessageService
// so you can display this name in the validation message instead of the real field name!
formErrorsMessageService.addFieldNames({
fooField: "Dummy foo field"
});
}
}
```
## Installation
Install NgxFormErrors from npm:
```
npm install @nationalbankbelgium/ngx-form-errors
```
## NgxFormErrors packaging
NgxFormErrors 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:
- FESM2015
- FESM5
- ESM2015
- ESM5
- UMD
So 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).
## Releases
NgxFormErrors releases are available on npm: https://www.npmjs.com/settings/nationalbankbelgium/packages
## Contributing
Please follow our [contribution guidelines](/CONTRIBUTING.md).
To know how to release NgxFormErrors, refer to [this page](/RELEASE.md).
## Authors
### Christopher Cortes
- [@GitHub](https://github.com/christophercr)
### Alexis Georges
- [@GitHub](https://github.com/SuperITMan)
## License
This project and all associated source code is licensed under the terms of the [MIT License](/LICENSE).
## Documentation
- [Developer Guide](/docs/DEV_GUIDE.md)
## Thank you notes :)
We'd like to thank the following companies who support the open source community with great tools and platforms.
### Jetbrains
We'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!
### GitHub Actions
We're supported by [GitHub Actions](https://github.com/features/actions)
