ngx-valdemort documentation

CircleCI Codecov

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:

Example :
<form [formGroup]="form" (ngSubmit)="submit()" #f="ngForm">
  <input formControlName="email" type="email" />
  @if (form.controls.email.invalid && (f.submitted || form.controls.email.touched)) {
    <div class="invalid-feedback">
      @if (form.controls.email.hasError('required')) {
        <div>The email is required</div>
      }
      @if (form.controls.email.hasError('email')) {
        <div>The email must be a valid email address</div>
      }
    </div>
  }

  <input formControlName="age" type="number" />
  @if (form.controls.age.invalid && (f.submitted || form.controls.age.touched)) {
    <div class="invalid-feedback">
      @if (form.controls.age.hasError('required')) {
        <div>The age is required</div>
      }
      @if (form.controls.age.hasError('min')) {
        <div>You must be at least {{ form.controls.age.getError('min').min }} years old</div>
      }
    </div>
  }

  <button (click)="submit()">Submit</button>
</form>

ngx-valdemort allows writing the above form in a simpler, cleaner way by using the ValidationErrorsComponent:

Example :
<form [formGroup]="form" (ngSubmit)="submit()">
  <input formControlName="email" type="email" />
  <val-errors controlName="email">
    <ng-template valError="required">The email is required</ng-template>
    <ng-template valError="email">The email must be a valid email address</ng-template>
  </val-errors>

  <input formControlName="age" type="number" />
  <val-errors controlName="age">
    <ng-template valError="required">The age is required</ng-template>
    <ng-template valError="max" let-error="error">You must be at least {{ error.min }} years old</ng-template>
  </val-errors>

  <button>Submit</button>
</form>

Even better, you can define default error messages once, and use them everywhere, while still being able to override them when needed:

Example :
<form [formGroup]="form" (ngSubmit)="submit()">
  <input formControlName="email" type="email" />
  <val-errors controlName="email" label="The email"></val-errors>

  <input formControlName="age" type="number" />
  <val-errors controlName="age" label="The age">
    <ng-template valError="max" let-error="error">You must be at least {{ error.min }} years old</ng-template>
  </val-errors>

  <button>Submit</button>
</form>

It works with ngModel too!

Example :
<input class="form-control" type="email" name="email" [(ngModel)]="user.email" required email #emailCtrl="ngModel" />
<val-errors [control]="emailCtrl.control" label="The email"></val-errors>

Learn more and see it in action on our web page

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 <val-errors> in your forms
  • Enjoy!

Go further:

  • define default error messages using <val-default-errors>
  • 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.

results matching ""

    No results matching ""