Ngx-formly: how-to use ngx-formly with ngx-translate

[fschell]

[x ] support request

just a question:

Is there a way to use ngx-translate with formly? Any samples available?

Formly seems to be awesome but we can not find any working example for translation or the usage of pipes

something like
````
....
{
key: 'readyTime',
type: 'select',
templateOptions: {
description: '"from" | translate' ,
required: true,
options: fromTime
},
...
},
...

````
did not work (translate not defined)

Thanks for a hint!

[aitboudad]

You can use one of the following methods:

1. expressionProperties https://stackblitz.com/edit/ngx-formly-translate-1
2. override the default wrappers for example label wrapper https://stackblitz.com/edit/ngx-formly-translate-2

for the first method it may introduce some performance issues for a large form which I'm thinking to solve it by allowing observable in expressionProperties, in the future you can use something like:

expressionProperties: {
  'templateOptions.label': this.translate.stream('HOME.SELECT'),
},

[aitboudad]

another method is to wait until translate is ready and use simply this.translate.instant:
https://stackblitz.com/edit/ngx-formly-translate-3

[fschell]

Thank you for the examples, which were very helpful. It works perfect!
You saved my day!

[HangLoop]

@aitboudad What is the most recommend way to handle the translation of the select options of a custom select type? I am currently using a custom pipe in the template to handle.

[aitboudad]

@HangLoop that's depend but the most recommended way for me is to pass options as an observable which will give you more control.

[aitboudad]

an example of ngx-translate is now available through the demo website https://formly.dev/examples/advanced/i18n

[HangLoop]

@aitboudad I am using a similar approach for the field label. Just using translate.instant() instead of translate.stream().

Because I will download the form fields json from backend to display the form in frontend. And now I am using a function to iterate the form fields object and assign the translate.instant() to every field labels and also the validation messages. But for the options, I am using a custom pipe. So I would like to know if this is a good approach. Thanks!

[aitboudad]

@HangLoop seems to me a good option too, keep in mind that there are several ways to achieve the same goal :)

[AhmedBHameed]

@aitboudad Changing in label is perfectly detected. But it seems placeholder has no observable to detect changes. Is there a way to make it as observable !

[aitboudad]

@AhmedBHameed observable is only available in V5 else use other proposals

expressionProperties: {
  'templateOptions.placeholder': this.translate.stream('HOME.SELECT'),
},

[AhmedBHameed]

@aitboudad Yes this is what i already done. Still label is updating but placeholder dose not detect changes.
formly v3.

expressionProperties: {
     'templateOptions.placeholder': () => this.translate.instant( 'CONTACT.PLACEHOLDER'),
     'templateOptions.label': () => this.translate.instant('CONTACT.LABEL' )
}

[aitboudad]

just checked and it seems working for me, check CONTACT.PLACEHOLDER message is defined else
fill an issue with a reproduction example.

[AhmedBHameed]

@aitboudad Tested with v4 also. Placeholder changes not detected.
I will rise an issue hoping to be solved for version 3 since we are use it in our company.
https://stackblitz.com/edit/ngx-formly-translate-1-7dejqt?file=src/app/app.component.ts
May you give me your green light for rising the issue please?

[aitboudad]

I see now the issue which is solved in V5,
V3 is not maintained anymore you may create a custom input which overrides the default input and bind placeholder attr.

[AhmedBHameed]

@aitboudad Any docs to follow ?

[aitboudad]

@AhmedBHameed https://formly.dev/guide/custom-formly-field,
if you want a quick solution (as a workaround), rerender fields when changing the placeholder which can be done using:

  changePlaceholder() {
   ...
    this.fields = [...this.fields];
  }

[johannesjo]

I think a nice and more performant option would be to provide alternative templates, which always use the translate pipe for things like labels. Like this for example:

    <mat-checkbox
      [formControl]="formControl"
      [id]="id"
      [formlyAttributes]="field"
      [tabindex]="to.tabindex || 0"
      [indeterminate]="to.indeterminate && formControl.value === null"
      [color]="to.color"
      [labelPosition]="to.align || to.labelPosition">
      {{ isTranslatePipe ? (to.label|translate) : to.label }}
      <span *ngIf="to.required && to.hideRequiredMarker !== true" class="mat-form-field-required-marker">*</span>
    </mat-checkbox>

@aitboudad If you like the approach, I can try to provide a PR for this.

[aitboudad]

@johannesjo that requires adding ngx-translate as a dependency :(, I see another approach that would make the integration much easy (using a custom extension), I'll provide an example when time allows!

[aitboudad]

@johannesjo see https://stackblitz.com/edit/angular-k8dzcs

[johannesjo]

@aitboudad that's really awesome! Thank you very much! Works like a charm! Love it!

Edit: Also made very small PR for the readme #1669

[Bukic]

@aitboudad I am using this translate.extension.ts approach (it is same like your from stackblitz with plus code for placeholder) and works perfect. But i have one issue. When using bootstrap accordion formly fields that are inside collapsed accordion are not translated, for example change language from dropdown and expand accordion labels/placeholders are not translated. But if all accordions are expanded and change language everything works perfect.

```
{
type: 'ac-accordion-field',
templateOptions: {},
fieldGroupClassName: 'row',
fieldGroup: [
{
key: 'accPeople',
templateOptions: { translate: true, label: 'caseFile.accordionPeople' },
fieldGroupClassName: 'row',
fieldGroup: [
{
className: 'col-sm-6 form-group',
key: 'personAssoc',
type: 'input',
templateOptions: {
translate: true,
label: 'caseFile.personType',
placeholder: 'caseFile.placeholderPersonType',
},
},
],
},
],
}

accordion-field html

```

[aitboudad]

@Bukic please fill a new issue with a reproduction stackblitz example.
Thanks!

[Bukic]

@aitboudad here is link to the new issue i created:

https://github.com/ngx-formly/ngx-formly/issues/2214