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:

``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


`
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|