formly-js / angular-formly

JavaScript powered forms for AngularJS
http://docs.angular-formly.com
MIT License
2.23k stars 406 forks source link

track-by does not work with nested field groups #710

Open wiltzius opened 7 years ago

wiltzius commented 7 years ago

The track-by feature is great because it allows you to update the form's fields dynamically. This is critical for my use of formly, where questions are repeated and/or modified depending on the answer to earlier questions in the form.

It works great in basic cases, but unfortunately it doesn't seem to work in nested field groups.

Here's a minimal example of the problem:

http://jsbin.com/kesihoxohi/1/edit?html,js,console,output

You can see that it works fine with the initial render, but clicking the button to add a new fieldGroup causes lots of errors.

I have a vague theory as to why this is: if I inspect the ng-forms, the top-level one has its fields in an ng-repeat that uses track by internally. But the nested ng-forms have ng-repeats that are missing the track by.

This seems to be because when the nested ng-form is compiled, its missing the track-by attribute. This attribute is added later, but not in time for it to apply to the nested ng-repeat.

I don't know much about the formly source, but it looks like this line may be the culprit: https://github.com/formly-js/angular-formly/blob/master/src/directives/formly-field.js#L325

It sets up the nested formly-form, but it doesn't pass the track-by attribute...

Any advice on how to work around this appreciated. I'm also happy to write a patch if someone can validate that my theory seems correct.