diff --git a/package.json b/package.json index 6bf61aaf5d..0d93cf945a 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 379b0cfc33..245d5d22c4 100644 --- a/src/app/app.module.ts +++ b/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'}, ], }), diff --git a/src/app/ui/formly-translate-extension/formly-translate-extension.ts b/src/app/ui/formly-translate-extension/formly-translate-extension.ts index ee4fc2ec40..255362c2cf 100644 --- a/src/app/ui/formly-translate-extension/formly-translate-extension.ts +++ b/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 }) }, + ] }; } diff --git a/src/app/ui/formly-translate-extension/formly-validation.service.spec.ts b/src/app/ui/formly-translate-extension/formly-validation.service.spec.ts deleted file mode 100644 index 7b5374eca7..0000000000 --- a/src/app/ui/formly-translate-extension/formly-validation.service.spec.ts +++ /dev/null @@ -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(); -// }); -// }); diff --git a/src/app/ui/formly-translate-extension/formly-validation.service.ts b/src/app/ui/formly-translate-extension/formly-validation.service.ts deleted file mode 100644 index bd323e81e9..0000000000 --- a/src/app/ui/formly-translate-extension/formly-validation.service.ts +++ /dev/null @@ -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}); - } -} diff --git a/src/app/ui/ui.module.ts b/src/app/ui/ui.module.ts index 90ae977541..1fb3df8bc1 100644 --- a/src/app/ui/ui.module.ts +++ b/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); diff --git a/yarn.lock b/yarn.lock index 681d21a0e1..c51347490a 100644 --- a/yarn.lock +++ b/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"