Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Ninja-Squad/ngx-valdemort
Simpler, cleaner Angular validation error messages
https://github.com/Ninja-Squad/ngx-valdemort
Last synced: 23 days ago
JSON representation
Simpler, cleaner Angular validation error messages
- Host: GitHub
- URL: https://github.com/Ninja-Squad/ngx-valdemort
- Owner: Ninja-Squad
- License: mit
- Created: 2018-06-01T13:27:21.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T18:18:11.000Z (about 1 month ago)
- Last Synced: 2024-10-29T20:24:55.349Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://ngx-valdemort.ninja-squad.com
- Size: 16.5 MB
- Stars: 202
- Watchers: 8
- Forks: 6
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular - ngx-valdemort - Simpler, cleaner Angular validation error messages. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-valdemort - Simpler, cleaner Angular validation error messages. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-valdemort - Simpler, cleaner Angular validation error messages. (Table of contents / Third Party Components)
README
[](https://circleci.com/gh/Ninja-Squad/ngx-valdemort)
[](https://codecov.io/gh/Ninja-Squad/ngx-valdemort)
# ngx-valdemort
ngx-valdemort gives you simpler, cleaner validation error messages for your Angular components.
## Why should you care?
If you've ever written forms like the following:
```html
@if (form.controls.email.invalid && (f.submitted || form.controls.email.touched)) {
@if (form.controls.email.hasError('required')) {
The email is required
}
@if (form.controls.email.hasError('email')) {
The email must be a valid email address
}
}
@if (form.controls.age.invalid && (f.submitted || form.controls.age.touched)) {
@if (form.controls.age.hasError('required')) {
The age is required
}
@if (form.controls.age.hasError('min')) {
You must be at least {{ form.controls.age.getError('min').min }} years old
}
}
Submit
```
ngx-valdemort allows writing the above form in a simpler, cleaner way by using the `ValidationErrorsComponent`:
```html
The email is required
The email must be a valid email address
The age is required
You must be at least {{ error.min }} years old
Submit
```
Even better, you can define default error messages once, and use them everywhere, while still being able to
override them when needed:
```html
You must be at least {{ error.min }} years old
Submit
```
It works with `ngModel` too!
```html
```
Learn more and see it in action on [our web page](https://ngx-valdemort.ninja-squad.com/)
## Installation
Using the CLI: `ng add ngx-valdemort`
Using npm: `npm install ngx-valdemort`
Using yarn: `yarn add ngx-valdemort`
## Getting started
- Import `ValdemortModule`, and other needed classes from ngx-valdemort
- Add the module to the imports of your application module
- Use `` in your forms
- Enjoy!
Go further:
- define default error messages using ``
- configure the look and feel globally by injecting and customizing the `ValdemortConfig` service
## Issues, questions
Please, provide feedback by filing issues, or by submitting pull requests, to the [Github Project](https://github.com/Ninja-Squad/ngx-valdemort).