How to bind repeated entries to different variables using ngModel in an ngFor loop?

48 Views Asked by At

My question is an extension of the following Stack Overflow question: Using ngModel inside an ngFor loop

I have implemented a similar approach to this and it works fine. However, the form that I am creating has some entries that can have duplicates (for example "FirstName" can have multiple entries because a submission can have an arbitrary number of people, determined by how many times the user clicks 'add new person'). Because of this I can't bind "FirstName" to the same value that I get it from (in the example linked above this would be the interface in groups[]). Otherwise every person entered would end up with the same data. The requirements of my project require me to read json to determine what fields are displayed so I can't change my approach completely. The way I know if a field can have multiple entries is if another piece of json matches it to an 'accordion'.

Here is a simplified piece of example data:

sections = {
  {"id":"0","name":"first section"}
}
accordions = {
  {"id":"0","name":"people","sectionId":"0"}
}
fieldContainers = {
  {"id":"0","name":"person","sectionId":null, "accordionId":0}
  {"id":"1","name":"event","sectionId":"0", "accordionId":null}
}
fields = {
  {"id":"1","fieldName":"first_name","fieldContainerId":"0","value":null}
  {"id":"2","fieldName":"last_name","fieldContainerId":"0","value":null}
  {"id":"3","fieldName":"event_location","fieldContainerId":"1","value":null)
  {"id":"4","fieldName":"event_name","fieldContainerId":"1","value":null)
}

What would be a good way for me to parse this data? Its easy enough to render I just am having issues with data binding. I really want to use the [(ngModel)] feature because it will make saving and loading forms much easier in the future, but right now I am leaning towards ditching it and using $event to determine what data is being entered. Thank you!

0

There are 0 best solutions below