ronisilveira / ng-jbv

NgJbv

This angular module proposes an easy way to show messages resulting from validation failures processed by a backend developed with Spring-boot using Java Bean Validation. With simple directives in HTML tags you can add CSS classes, hide or show elements and insert messages from the backend. The module also adds an ErrorHandler that captures validation errors generated by the backend, dispensing exception treatments on each request.

Installation instructions

The installation of the ng-jbv module can be done through npm

npm install ng-jbv --save

After installation you need to import the ng-jbv module into the application module and into all the modules where you want to use it.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { JbvModule } from 'ng-jbv'; // Add this import

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    JbvModule // And add the module class here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Directives

• jbvField Sets the field validated. Validation failures for this field present in the JSON of the response will imply changes to all elements with the other module directives.
• jbvErrorClass Defines the CSS classes that will be added to the element if an error occurs in the field defined by jbvField.
• jbvShowOnError Defines that the element with this directive will only be displayed if there is an error in the field defined by jbvField.
• jbvErrorMessage Adds the error message regarding the field defined by jbvField in the element with this directive.

Usage

<div jbvErrorClass="my-error-class" jbvField="name">
  <label for="name">Name</label>
  <input id="name">
  <span id="validationMessage" *jbvShowOnError jbvErrorMessage></span>
</div>

Example with Bootstrap

<div class="form-group" jbvErrorClass="has-error has-feedback" jbvField="name">
  <label class="control-label" for="name">Name</label>
  <input class="form-control" id="name" formControlName="name">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" *jbvShowOnError></span>
  <span id="helpBlock" class="help-block" jbvErrorMessage></span>
</div>