ng-error-messages v0.1.6
ng-error-messages
A library that help you show error messages based in rules validation. Based in repository of my partner Arthur
Demo
https://ouracademy.github.io/error-messages/
Reason
Tired to always write this in your angular app:
<input type="text" formControlName="text">
<div *ngIf="form.get('text').hasError('required') && form.get('text').touched">
Field is required
</div>
And repeat this to every field in every form in every view.
So you can instead do this:
<input placeholder="Texto:" formControlName="text">
<div errorMessage="text" alias="Super Texto" ></div>
And it will do the same in very uniform way in all your fields in every forms in all your views. This package will create validation messages for you. It contains predefined validation messages.
Installation
Install the npm module by running:
npm install ng-error-messages --save
Usage
You can see the demo app to have a more detail of the usage.
1. Import the ErrorMessageModule
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ErrorMessageModule } from 'ng-error-messages';
@NgModule({
imports: [
BrowserModule,
HttpModule,
ErrorMessageModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
2. Init the DisplayErrorService for your application:
import { Component } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { DisplayErrorService } from 'ng-error-messages'
@Component({
selector: 'demo-app',
templateUrl: 'index.component.html'
})
export class IndexComponent {
form: FormGroup;
valueFormated
constructor(
private displayErrorService: DisplayErrorService,
private fb: FormBuilder) { }
ngOnInit(): void {
this.buildForm();
}
buildForm(): void {
this.form = this.fb.group({
'text': ['', [
Validators.required,
Validators.minLength(5),
Validators.maxLength(10)
]]
});
}
setLanguage(lang) {
this.displayErrorService
.setLanguage(lang)
.subscribe(r => {
console.log("change language")
}, err => {
alert(err)
})
}
}
3. Use it on your template:
<div [formGroup]="form">
<h2>
Messager for errors
</h2>
<div>
<input placeholder="Texto:" formControlName="text">
<div errorMessage="text" alias="Super Texto" ></div>
</div>
</div>
Validators
This is the list of the supported validations
angular built-in validators
- required
- minlength
- maxlength
- pattern
- min
- max
Customizing
At this moment only support alias for every field. TODO: Customize messages for error type.
Development
Prepare your environment
- Install Node.js and NPM (should come with)
- Install local dev dependencies:
npm install
while current directory is this repo
Development server
Run npm start
to start a development server on port 8000 with auto reload + tests.
Testing
Run npm test
to run tests once or npm run test:watch
to continually run tests.
Release
- Bump the version in package.json (once the module hits 1.0 this will become automatic)
npm run release
TODO
This package it's creating on free times after university...and theses... For now works with Reactive Driven Forms, it wasn't tested with Template Driven Forms. Probably it will work, if work send us a message.