ng-jbv
v1.1.4
Published
Angular directives to add validations elements on the form components when backend is implemented with spring boot and java beans validation.
Downloads
6
Maintainers
Readme
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 byjbvField
.jbvShowOnError
Defines that the element with this directive will only be displayed if there is an error in the field defined byjbvField
.jbvErrorMessage
Adds the error message regarding the field defined byjbvField
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>