Model binding addonLeft.text angular formly

Question

I am using bootstrap templates with angular-formly and I wanted to bind addonsLeft.text to a model so that it dynamically changes once a select option has changed.

This is how an input looks like:

  {
    key: 'my_input',
    type: 'input',
    templateOptions: {
      label: 'Text',
      addonLeft: {
            text: vm.model.select
      }
    }
  }

From what I understood bootstrap templates do not create a model for text / class option and therefore changing the model wouldn't affect the addonLeft.text.

Find a non-working example in this jsbin link.

I have found a hacky way of doing this butI am not sure if this is the right way.

Here is the solution in this jsbin link.

---

Should I create a custom template instead so that it has a proper model etc? Reason I haven't done this already it's because there is already an implemented solution that would keep my code cleaner.

Answer 1

This is a perfect case for Formly Expressions:

{
    key: 'my_input',
    type: 'input',
    templateOptions: {
        label: 'Text',
        addonLeft: {
            text: ''
        }
    },
    expressionProperties: {
      'templateOptions.addonLeft.text': 'model.select' // <- HERE
    }
}

Example JSBin: http://jsbin.com/tudivi/1/edit?html,js,console,output