Merge pull request #53 from Totati/core/update-readme-with-translate-…

…demo chore: update version to 16.3.0 and update readme
Totati · Oct 22, 2023 · 1ab18af · 1ab18af
2 parents 3986585 + 1aad3bf
commit 1ab18af
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -34,7 +34,9 @@ import { NgxMatErrorsModule, NGX_MAT_ERROR_CONFIG_EN } from "ngx-mat-errors";
 })
 export class AppModule {}
 ```
+
 Or you can import only `NgxMatErrors` and `NgxMatErrorDef` as they are marked standalone.
+
 ```typescript
 import { NgxMatErrors, NgxMatErrorDef, NGX_MAT_ERROR_CONFIG_EN } from "ngx-mat-errors";
 
@@ -139,13 +141,11 @@ import {
 import { FactoryProvider, LOCALE_ID } from '@angular/core';
 
 export const NGX_MAT_ERROR_DEFAULT_CONFIG: FactoryProvider = {
-  useFactory: (locale: string) => {
-    return {
-      ...errorMessagesEnFactory(locale),
-      min: (error: MinError) =>
-        `Min value is ${error.min}, actual is ${error.actual}`,
-    };
-  },
+  useFactory: (locale: string) => ({
+    ...errorMessagesEnFactory(locale),
+    min: (error: MinError) =>
+      `Min value is ${error.min}, actual is ${error.actual}`,
+  }),
   provide: NGX_MAT_ERROR_DEFAULT_OPTIONS,
   deps: [LOCALE_ID],
 };
@@ -157,6 +157,39 @@ export const NGX_MAT_ERROR_DEFAULT_CONFIG: FactoryProvider = {
 export class AppModule {}
 ```
 
+You can provide an `Observable<ErrorMessages>` too, which allows changes of error messages. This comes handy when your app supports JIT localization with libraries like `@ngx-translate`.
+
+```
+import {
+  NGX_MAT_ERROR_DEFAULT_OPTIONS
+} from 'ngx-mat-errors';
+import { FactoryProvider, LOCALE_ID } from '@angular/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+
+
+export const NGX_MAT_ERROR_DEFAULT_CONFIG: FactoryProvider = {
+  useFactory: (
+    locale: string,
+    translateService: TranslateService
+  ): Observable<ErrorMessages> => translateService.onLangChange.pipe(
+    startWith(null),
+    map(() => ({
+      required: translateService.instant('core.validations.required'),
+      minlength: (error: MinError) => translateService.instant('core.validations.minlength', error),
+      ...
+    }))
+  ),
+  provide: NGX_MAT_ERROR_DEFAULT_OPTIONS,
+  deps: [LOCALE_ID, TranslateService],
+};
+
+@NgModule({
+  ...
+  providers: [NGX_MAT_ERROR_DEFAULT_CONFIG],
+})
+export class AppModule {}
+```
+
 ### \*ngxMatErrorDef
 
 You can customize your error messages even more with `*ngxMatErrorDef` directive.
@@ -191,8 +224,8 @@ When used with multiple controls, you can specify the control which the error me
 
 ## Compatibility
 
-- `@angular/core`: `^16.0.0`,
-- `@angular/material`: `^16.0.0`,
+- `@angular/core`: `^16.0.0 || ^17.0.0`,
+- `@angular/material`: `^16.0.0 || ^17.0.0`,
 
 ### Reactve forms
 

diff --git a/projects/ngx-mat-errors/package.json b/projects/ngx-mat-errors/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-mat-errors",
-  "version": "16.2.0",
+  "version": "16.3.0",
   "author": {
     "name": "Totati",
     "url": "https://twitter.com/48Aca"