Awesome
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
- number
- minAge
- maxAge
These error messages can be overwritten with the addCustomErrorMessage
function:
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:
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 messageserrorClasses
: a string of css classes to apply to the error message elementsrules
: a list of rules for when to check for errors on the form control. it defaults to['touched']
<form class="mx-auto flex flex-col gap-4 justify-center items-center" [formGroup]="form">
<div class="flex gap-2 items-start">
<label class="pt-2" for="name">Name: </label>
<ngx-control-errors-display errorClasses="error-message">
<input type="text" formControlName="name" />
</ngx-control-errors-display>
</div>
<ngx-control-errors-display errorClasses="error-message">
<div class="flex gap-2 items-center">
<label for="email">Email: </label><input type="text" formControlName="email" />
</div>
</ngx-control-errors-display>
<ngx-control-errors-display errorClasses="error-message">
<div class="flex gap-2 items-center">
<label for="age">Age: </label><input type="number" formControlName="age" />
</div>
</ngx-control-errors-display>
</form>
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 numbernumber
: validates that the value is a numbervalidZipCode
: validates a US zip codeconfirmStringMatch
: validates that field 1 and field 2 have the same valueminAge
: validates that the age passed in to the control is at least the provided agemaxAge
: validates that the age passed in to the control is no greater than the provided age