chore: use observable for Formly validation message

package.json

@@ -109,8 +109,8 @@
     "@ngrx/schematics": "^9.1.0",
     "@ngrx/store": "9.1.0",
     "@ngrx/store-devtools": "^9.1.0",
-    "@ngx-formly/core": "^5.6.0",
-    "@ngx-formly/material": "^5.6.0",
+    "@ngx-formly/core": "^5.7.0",
+    "@ngx-formly/material": "^5.7.0",
     "@ngx-translate/core": "^11.0.1",
     "@ngx-translate/http-loader": "^4.0.0",
     "@schematics/angular": "^8.0.1",

src/app/app.module.ts

@@ -108,7 +108,6 @@ export function createTranslateLoader(http: HttpClient) {
         immutable: true
       },
       validationMessages: [
-        {name: 'required', message: 'This field is required'},
         {name: 'pattern', message: 'Invalid input'},
       ],
     }),

src/app/ui/formly-translate-extension/formly-translate-extension.ts

@@ -1,15 +1,19 @@
-import {FormlyFieldConfig} from '@ngx-formly/core';
+import {FormlyFieldConfig, ConfigOption} from '@ngx-formly/core';
 import {TranslateService} from '@ngx-translate/core';
-import {of} from 'rxjs';
+import {map} from 'rxjs/operators';
+import {T} from '../../t.const';
 
 export class TranslateExtension {
-  constructor(
-    private translate: TranslateService,
-  ) {
-  }
+  constructor(private translate: TranslateService) {}
 
   prePopulate(field: FormlyFieldConfig) {
     const to = field.templateOptions || {};
+    if (Array.isArray(to.options)) {
+      const options = to.options;
+      to.options = this.translate.stream(options.map(o => o.label)).pipe(
+        map(labels => options.map(o => ({ ...o, label: labels[o.label] })))
+      );
+    }
 
     field.expressionProperties = {
       ...(field.expressionProperties || {}),
@@ -22,26 +26,22 @@ export class TranslateExtension {
       ...(to.placeholder
         ? {'templateOptions.placeholder': this.translate.stream(to.placeholder)}
         : {}),
-      ...(to.options && Array.isArray(to.options)
-        ? {
-          // TODO better solution working with live changes
-          'templateOptions.options': of(to.options.map((opt) => {
-            return {
-              ...opt,
-              label: opt.label && this.translate.instant(opt.label),
-            };
-          })),
-        }
-        : {}),
     };
   }
 }
 
-export function registerTranslateExtension(translate: TranslateService) {
+export function registerTranslateExtension(translate: TranslateService): ConfigOption {
   return {
     extensions: [{
       name: 'translate',
       extension: new TranslateExtension(translate)
     }],
+    validationMessages: [
+      { name: 'required', message: () => translate.stream(T.V.E_REQUIRED) },
+      { name: 'minlength', message: (err, field) => translate.stream(T.V.E_MIN_LENGTH, { val: field.templateOptions.minLength }) },
+      { name: 'maxlength', message: (err, field) => translate.stream(T.V.E_MAX_LENGTH, { val: field.templateOptions.maxLength }) },
+      { name: 'min', message: (err, field) => translate.stream(T.V.E_MIN, { val: field.templateOptions.min }) },
+      { name: 'max', message: (err, field) => translate.stream(T.V.E_MAX, { val: field.templateOptions.max }) },
+    ]
   };
 }

src/app/ui/formly-translate-extension/formly-validation.service.spec.ts

@@ -1,12 +0,0 @@
-// import { TestBed } from '@angular/core/testing';
-//
-// import { FormlyValidationService } from './formly-validation.service';
-//
-// describe('FormlyValidationService', () => {
-//   beforeEach(() => TestBed.configureTestingModule({}));
-//
-//   it('should be created', () => {
-//     const service: FormlyValidationService = TestBed.inject(FormlyValidationService);
-//     expect(service).toBeTruthy();
-//   });
-// });

src/app/ui/formly-translate-extension/formly-validation.service.ts

@@ -1,42 +0,0 @@
-import {Injectable} from '@angular/core';
-import {TranslateService} from '@ngx-translate/core';
-import {FormlyConfig, FormlyFieldConfig} from '@ngx-formly/core';
-import {T} from '../../t.const';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class FormlyValidationService {
-
-  constructor(
-    private _translateService: TranslateService,
-    private _formlyConfig: FormlyConfig) {
-  }
-
-  init(): void {
-    // message without params
-    this._formlyConfig.addValidatorMessage('required', (err, field) => this._translateService.instant(T.V.E_REQUIRED));
-
-    // message with params
-    this._formlyConfig.addValidatorMessage('minlength', (err, field) => this.minlengthValidationMessage(err, field, this._translateService));
-    this._formlyConfig.addValidatorMessage('maxlength', (err, field) => this.maxlengthValidationMessage(err, field, this._translateService));
-    this._formlyConfig.addValidatorMessage('min', (err, field) => this.minValidationMessage(err, field, this._translateService));
-    this._formlyConfig.addValidatorMessage('max', (err, field) => this.maxValidationMessage(err, field, this._translateService));
-  }
-
-  private minlengthValidationMessage(err, field: FormlyFieldConfig, translate: TranslateService) {
-    return translate.instant(T.V.E_MIN_LENGTH, {val: field.templateOptions.minLength});
-  }
-
-  private maxlengthValidationMessage(err, field: FormlyFieldConfig, translate: TranslateService) {
-    return translate.instant(T.V.E_MAX_LENGTH, {val: field.templateOptions.maxLength});
-  }
-
-  private minValidationMessage(err, field: FormlyFieldConfig, translate: TranslateService) {
-    return translate.instant(T.V.E_MIN, {val: field.templateOptions.min});
-  }
-
-  private maxValidationMessage(err, field: FormlyFieldConfig, translate: TranslateService) {
-    return translate.instant(T.V.E_MAX, {val: field.templateOptions.max});
-  }
-}

src/app/ui/ui.module.ts

@@ -67,7 +67,6 @@ import {MyHammerConfig} from '../../hammer-config.class';
 import {registerTranslateExtension} from './formly-translate-extension/formly-translate-extension';
 import {FormlyTranslatedTemplateComponent} from './formly-translated-template/formly-translated-template.component';
 import {MatMomentDateModule} from '@angular/material-moment-adapter';
-import {FormlyValidationService} from './formly-translate-extension/formly-validation.service';
 import {DialogFullscreenMarkdownComponent} from './dialog-fullscreen-markdown/dialog-fullscreen-markdown.component';
 import {JiraToMarkdownPipe} from './pipes/jira-to-markdown.pipe';
 import {BetterDrawerModule} from './better-drawer/better-drawer.module';
@@ -215,10 +214,7 @@ const OTHER_3RD_PARTY_MODS_WITHOUT_CFG = [
 export class UiModule {
   constructor(
     private _markdownService: MarkdownService,
-    private _formlyValidationService: FormlyValidationService,
   ) {
-    this._formlyValidationService.init();
-
     const linkRenderer = _markdownService.renderer.link;
     _markdownService.renderer.link = (href, title, text) => {
       const html = linkRenderer.call(_markdownService.renderer, href, title, text);

yarn.lock

@@ -1159,17 +1159,17 @@
     rxjs "6.5.4"
     webpack-sources "1.4.3"
 
-"@ngx-formly/core@^5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@ngx-formly/core/-/core-5.6.0.tgz#ef60fd5d3f93c4f2f6a08135ae8017094435a334"
-  integrity sha512-XzN1tdeLeL9eFffvetF2lVZAKaCnbrLoPWf5bEbol+T54iOLUE6GvE9nCYqRcR3ej2vCOMQFQgOKi/Ltm7aI+A==
+"@ngx-formly/core@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ngx-formly/core/-/core-5.7.0.tgz#ce314179f379bd8563aefa8fae8429fc336e9714"
+  integrity sha512-1zOE6VbO0MtV7RAkUV1ogxsi9Qg2W4QuPRIOd/AgT0mE/q6XtlXTkfIfgq92PzUt3EXSO3IzwdViw+HnnUfhaQ==
   dependencies:
     tslib "^1.7.1"
 
-"@ngx-formly/material@^5.6.0":
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/@ngx-formly/material/-/material-5.6.0.tgz#14fe934705d58aea15f2b2e27ce0ff07b08f3114"
-  integrity sha512-J3H9OK8MIsS3rz2Fm1JE5OjbKk/sX8DC7D6iDrbXiAfTl5SRR7iYR/wBRNA/LT7L7M3xebF4eAnudQhjBb1HEQ==
+"@ngx-formly/material@^5.7.0":
+  version "5.7.0"
+  resolved "https://registry.yarnpkg.com/@ngx-formly/material/-/material-5.7.0.tgz#cadce65577195bf5e96d3381e551bf50c3da8004"
+  integrity sha512-PR8q/VrszpnXMks2xvmQ6uelpzXxFTKGxkwa6baZ6BKv9YgpgdGBda7ZccYegFt72ttbAagQORExCWQVRYklEA==
   dependencies:
     tslib "^1.9.0"