Using angular-translate with formly in a select form

Question

I'm trying to use angular-translate to translate the data from a select input on a form made formly, but I can't make it work properly.

Basically, when using angular-translate for other types of input, I would have to do something like

'templateOptions.label': '"NAME" | translate',
'templateOptions.placeholder': '"NAME" | translate'

following this pattern, I've tried to put my data like this:

"templateOptions.options": [
    {
        "name": "{{ 'OPT1' | translate }}",
        "id": 1
    },
    {
        "name": "{{ 'OPT2' | translate }}",
        "id": 2
    }
]

But that gives me nothing on the dropdown menu. Can someone give me any directions here?

The complete code can be found on the link http://output.jsbin.com/horawaqaki/

Thanks for the help!

Answer 1

In this case you can use $translate service inside your controller. This service can return you translated values, but it is asynchronous operation. Because of this you should add some flag in your controller in order to show form only when you receive this translations (in this example I'm going to use vm.areFieldGenerated and then show/hide form and element with ng-if).

So, basically you should pass an array of localization keys and $translate service will return you the following object:

{
    'NAME': 'Name',
    'OPT1': 'Working!',
    'OPT2': 'Working indeed!'
}

And after that you are able to use this value to localize your field title or options.

Your function for generating fields and assigned translated values to the options will look like this:

// variable assignment
vm.env = getEnv();
vm.model = {};
vm.options = {formState: {}};
vm.areFieldsGenerated = false;

generateFields();

// function definition
function generateFields() {
  $translate(['NAME', 'OPT1', 'OPT2']).then(function(translationData) {
    vm.fields = [
      {
        key: 'item',
        type: 'select',
        templateOptions: {
          valueProp: 'id',
          labelProp: 'name',
          options: [
            {name:'Not working!', id: 1},
            {name:'Not working indeed!', id: 2}
          ]
        },
        expressionProperties: {
          'templateOptions.label': transationData['NAME'],
          'templateOptions.options': [
            {
              name: translationData['OPT1'],
              id:1
            },
            {
              name: translationData['OPT2'],
              id:2
            }
          ]
        }
      }
    ];
    vm.originalFields = angular.copy(vm.fields);
    vm.areFieldsGenerated = true;
  });
}

I've created working example here.

More examples with $translate on angular-translate.github.io.