Ngx-reactive-forms-utils NPM

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:

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 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']

<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 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