Samuel
Samuel

Reputation: 147

Angular formly - Get model from field in wrapper

I am creating a wrapper that will display the model value as a normal text on the page. When mouse over is triggerd on this text it will transform into a formly-field, this workes great. The problem i have is that the normal text wont change when an edit has been made in the field, so how do i get the value of the model from the field if this is possible?

I made a bin as an example of my problem.

the Wrapper:

template: [
                '<div ng-hide="to.editorEnabled" >',
                    '<div ng-mouseover="to.editorEnabled=true">',
                        '{{to.label}}</br>',
                        '{{to.value}}',
                    '</div>',
                '</div>',
                '<div ng-show="to.editorEnabled" ng-mouseleave="to.editorEnabled=false">',
                    '<formly-transclude></formly-transclude>',
                '</div>'
           ]

Field and model:

vm.model = {textField: "Mouse over this field"};


vm.fields = [
  {
    key: 'textField',
    type: 'input',
    templateOptions: {
      label: 'Text Label',
      type: 'text',
      value:vm.model.textField
    }
  }];

Upvotes: 0

Views: 1814

Answers (1)

Samuel
Samuel

Reputation: 147

Problem was solved using formly watchers.

Updated bin

Code with watcher:

vm.fields = [
  {
    key: 'textField',
    type: 'input',
    templateOptions: {
      label: 'Text Label',
      type: 'text',
      value:vm.model.textField
    },
    watcher: {
      listener: function(field, newValue, oldValue, scope, stopWatching) {
        if(newValue) {
          field.templateOptions.value = newValue;
        }
      }
    }
  }];

Upvotes: 1

Related Questions