npm package: @geosdi/ngx-validation-message
Description: Create error message for validating forms
Author: Salvia Vito
Latest version: 1.1.3

# NgxValidationMessage

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.0.0.

# General information

Service validate reactive form dynamically. It use ngx-transate to translate messages.
Language supported : ["it", "en"] 

## Installation

`npm i @geosdi/ngx-validation-message --save`

It depends on :

    "@angular/common": ">=13.0.0",
    "@angular/core": ">=13.0.0",
    "@ngx-translate/core": ">=14.0.0",
    "@ngx-translate/http-loader": ">=7.0.0",
    "typescript": ">=4.4.4"
    "ngx-translate-multi-http-loader": "^3.0.0"

## Usage

In App module add:

 ```typescript

export function HttpLoaderFactory(httpClient: HttpClient) {
  return new MultiTranslateHttpLoader(httpClient, [
    {prefix: "./assets/i18n/validation/", suffix: ".json"},
    {prefix: "./assets/i18n/", suffix: ".json"},
  ]);
}

        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        }),


 ```


add validation-message-component to field to validate

 ```html
      <form (submit)="onSubmit()" [formGroup]="form" style="display: inline;">
        <input class="form-control" formControlName="test" placeholder="{{ 'validations' | translate }}"
               required
               style="display: inline;width:70%;" type="text">
        <validation-message-component [control]="getControls('test')" 
                                      fieldName="'{{ 'test.field' | translate }}'"
                                      iconClass="pi pi-check"></validation-message-component>
      </form>

 ```
in angular.json in assets section add:

            {
                "glob": "**/*",
                "input": "./node_modules/@geosdi/ngx-validation-message/src/assets",
                "output": "/assets/"
              }

 ```typescript


    this.form = this.formBuilder.group({
      test: new FormControl('', Validators.required)
    });

}

 ```

## Messages

{
  "validation": {
    "required": "Per favore inserisci {{ FIELD_MESSAGE }}",
    "email": "Email non corretta",
    "no_match": "Le passwords non coincidono",
    "pattern": "Pattern non matcha con {{ FIELD_MESSAGE }} ",
    "min_length": "Inserire almeno {{ FIELD_MESSAGE }} caratteri",
    "max_length": "Inserire al massimo {{ FIELD_MESSAGE }} caratteri",
    "invalid_date": "Data non valida"
  }
}

{
  "validation": {
    "required": "Please insert {{ FIELD_MESSAGE }}",
    "email": "Email incorrect",
    "no_match": "Passwords doesn't match",
    "pattern": "Pattern does not match {{ FIELD_MESSAGE }}",
    "min_length": "Insert al least{{ FIELD_MESSAGE }} characters",
    "max_length": "Insert at most {{ FIELD_MESSAGE }} characters",
    "invalid_date": "Invalid Date"
  }
}



## Methods

 | Method  | action 
 | ------------- | ------------- | 
 | control | name of the control to validate| 
 | fieldName| Name of the control, it will be used as interpola params in message {{ FIELD_MESSAGE }}| 
 | iconClass | icon to display|