Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pjlamb12/ngx-reactive-forms-utils
Utilities to assist in the use of reactive Angular forms
https://github.com/pjlamb12/ngx-reactive-forms-utils
Last synced: 23 days ago
JSON representation
Utilities to assist in the use of reactive Angular forms
- Host: GitHub
- URL: https://github.com/pjlamb12/ngx-reactive-forms-utils
- Owner: pjlamb12
- Created: 2022-11-09T05:45:40.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-14T20:33:04.000Z (about 1 year ago)
- Last Synced: 2024-11-07T12:07:25.026Z (about 1 month ago)
- Language: TypeScript
- Size: 2.11 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - ngx-reactive-forms-utils - Provides easy validation error display and custom validators. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-reactive-forms-utils - Provides easy validation error display and custom validators. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-reactive-forms-utils - Provides easy validation error display and custom validators. (Table of contents / Third Party Components)
README
# ngx-reactive-forms-utils
Reactive forms in Angular are a great way to manage forms. This library provides utilities that make it easier to work with reactive forms.
Utilities that are provided include:
- Easy validation error display
- Some common custom validators
To get started, import the `NgxReactiveFormsUtilsModule` in your app's `AppModule`.
## Validation Error Display
Error messages are provided for the following common errors out of the box:
- required
- minlength
- maxlength
- min
- max
- email
- number
- minAge
- maxAge
These error messages can be overwritten with the `addCustomErrorMessage` function:
```ts
addCustomErrorMessage('required', () => 'This is a new required field message');
```
If you have a custom error message that you need to show, you can add it with the same function as demonstrated above:
```ts
addCustomErrorMessage('newCustomError', () => 'This is a new custom error message');
```
The `ngx-control-errors-display` component will show the validation errors for a given form control automatically. You can wrap your input in the component, and any relevant errors will be displayed if necessary. There are a few inputs:
- `containerClasses`: a string of css classes to apply to the container element that wraps the projected content and the necessary error messages
- `errorClasses`: a string of css classes to apply to the error message elements
- `rules`: a list of rules for when to check for errors on the form control. it defaults to `['touched']`
```html
Name:
Email:
Age:
```
## Custom Validators
The Angular reactive forms module provides a good list of default Validators for form controls, but there are some that would be convenient that are not present. This library adds those validators:
- `phoneNumber`: validates a phone number
- `number`: validates that the value is a number
- `validZipCode`: validates a US zip code
- `confirmStringMatch`: validates that field 1 and field 2 have the same value
- `minAge`: validates that the age passed in to the control is at least the provided age
- `maxAge`: validates that the age passed in to the control is no greater than the provided age