Angular Library That Helps You Show Message Error

ng-error-messages is a set of classes to help handle the error messages displayed in your form.

how to display error message in angular, angular validator set error message, angular reactive forms show validation errors on submit, reactive form error messages

This is the list of the supported validations

angular built-in validators

required
minlength
maxlength
pattern
min
max
email

Angular Validation Error Messages Cleaner | ngx-valdemort

How to make use of it:

Installation

npm install ng-error-messages --save

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:

<mat-card [formGroup]="form">
        <mat-card-title>
            Messager for errors
        </mat-card-title>
        <div>
                <input placeholder="Texto:" matInput formControlName="text">
                </input>
                <div errorMessage="text" alias="Super Texto" ></div>
        </div>
    </mat-card>

Custom Form Error Messages, ng-error-messages Plugin/Github, dynamic error message in angular