Skip to content
Simpler, cleaner Angular validation error messages
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
projects fix: correct class in bootstrap integration doc Jan 14, 2019
release docs: improve the release process Jun 15, 2018
scripts
.codecov.yml
.editorconfig initial commit Jun 1, 2018
.gitignore
CHANGELOG.md
LICENSE.md
README.md chore: move to circleci Feb 28, 2019
angular.json
package.json
renovate.json
tsconfig.json
tslint.json chore: ban focused tests using tslint, and add lint to CI build Dec 14, 2018
yarn.lock

README.md

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:

<form [formGroup]="form" (ngSubmit)="submit()" #f="ngForm">
  <input formControlName="email" type="email"/>
  <div class="invalid-feedback" *ngIf="form.get('email').invalid && (f.submitted || form.get('email').touched)">
    <div *ngIf="form.get('email').hasError('required')">The email is required</div>
    <div *ngIf="form.get('email').hasError('email')">The email must be a valid email address</div>
  </div>
  
  <input formControlName="age" type="number"/>
  <div class="invalid-feedback" *ngIf="form.get('age').invalid && (f.submitted || form.get('age').touched)">
    <div *ngIf="form.get('age').hasError('required')">The age is required</div>
    <div *ngIf="form.get('age').hasError('min')">You must be at least {{ form.get('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:

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

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

Learn more and see it in action on our web page

Installation

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.

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.