CODEWITHSUNDEEP
angularjsangular-formly
tuckerjt07
tuckerjt07

Reputation: 922

Angular-Formly Nested Model Not Updating

I am having an interesting issue with angular-formly. I am attempting to use the 'model' tag as shown below because my model is not flat.

{
    'key': 'last',
    'model': 'model.name',
    'templateOptions: {}
}

However, I cannot update the model in a clean manner. Simply replacing model or even model.name with a matching model that contains the updated value does not cause the model to update the view. 

var newModel = {
    name: {
        first: 'Gandalf',
        last: 'The White'
    }
};
self.model = {
    name: {
        first: 'Gandalf',
        last: 'The Grey'
    }
};
function setNewLastName() {
    self.model = newModel;
}
setNewLastName();

However if I drill down to the specific property, it works as expected.

self.model.name.last = self.newModel.name.last;

Here is a link to a JSBin where the value updates using the drill-down method immediately above. Drill-down JSBin

Another JSBin that attempts to update the model by assigning a new model that does not update. Assign Model JSBin

Has anyone ran into this issue or can you see where I'm doing something wrong?

Upvotes: 1

Views: 2293

Answers (1)

Ben Orozco
Ben Orozco

Reputation: 4381

You replace the model for each key, therefore you never see the changes.

What you need to do is to match the model in the key itself.

vm.fields = [
  {
    key: 'name.first', // <-- HERE
    type: 'input',
    //model: vm.model.name, //Wrong
    templateOptions: {
      label: 'First Name'
    }
  },
  {
    key: 'name.first', // <-- AND HERE
    type: 'input',
    //model: vm.model.name, //Wrong
    templateOptions: {
      label: 'Last Name'
    }
  },
  //...
];

See corrected example: http://jsbin.com/pupijoc/1/edit?js,console,output

UPDATE: Nested properties are also handled by fieldGroups

Se updated example: http://jsbin.com/pupijoc/3/edit?js,console,output

Upvotes: 2

Related Questions