NgxValidationMessage

This library was generated with 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:

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

     <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/"
          }

   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|