Ngx-formly: validation message i18n

[wpcfan]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request

Current behavior

I have defined email validator and the translation key for validation message, but I don't figure out a way to translate the message before assign it to FormlyModule config

export const emailValidationMessage = 'validation.regex.email.message';

export function emailValidator(control: FormControl): ValidationErrors {
  return emailPattern.test(control.value) ? null : { email: true };
}

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    TranslateModule,
    ReactiveFormsModule,
    MatChipsModule,
    FormlyMaterialModule,
    FormlyModule.forRoot({
      validators: [
        { name: 'email', validation: emailValidator }
      ],
      validationMessages: [
        { name: 'email', message: emailValidationMessage }
      ]
    }),
    FormlyMatToggleModule
  ],
  exports: [FormlyMaterialModule, FormlyModule, FormlyMatToggleModule]
})
export class FormlyControlsModule {}

Expected behavior

It would be better if there are some documents about this.

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?
Please tell us about your environment:

macOS Mojave, VSCode, Node 10.x

• Angular version: 7.1.X

• Browser: [Chrome 71 ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

• Node (for AoT issues): node --version = 10.x

[aitboudad]

see https://github.com/ngx-formly/ngx-formly/issues/313#issuecomment-343694817

[witek1902]

Example from our repo:
https://github.com/asc-lab/ngx-formly-playground/blob/master/app-formly-playground/src/app/shared/services/validations.loader.ts

[aitboudad]

In v5.7 defining the validation message has been simplified, I've added an example in https://formly.dev/examples/advanced/i18n-alternative:

The ValidationLoader is not needed anymore and can be removed.

export function registerTranslateExtension(translate: TranslateService) {
  return {
+   validationMessages: [
+     {
+       name: 'required',
+       message() {
+         return translate.stream('FORM.VALIDATION.REQUIRED');
+       },
+     },
+   ],
    extensions: [{
      name: 'translate',
      extension: new TranslateExtension(translate)
    }],
  };
}