#How can I handle nested for loops for a dynamic form? I'm trying to have multiple sets of selects.

16 messages · Page 1 of 1 (latest)

shell fractal
#

I'm creating a website to create D&D characters with a couple other people. Each class in D&D has proficiencies that you can choose from, some have multiple sets of them. For example, the barbarian (shown in the video) has one set of two proficiencies you can choose from, with 6 options. The bard (also shown in the video) has two sets of three proficiencies each, with a lot of options for both.

For some reason though, I can't get the select statements to display right. it keeps only defining the first couple, and then the rest of them are blank. Whats weird is that if i hide and unhide the elements (via switching in the tabs of the page, shown in the video) then the next select statement gets populated. This isn't a race condition issue or anything, i know for a fact that all of the select's option data is fully loaded in, because it pulls from the same array and i've printed it all out at once, before all of the tab switching and selects populating.

I've slaved over this issue for days now, and I'm coming here as a last resort lol. I have no clue what the problem could be. There's the errors that appear in the inspect window, but I don't know how to fix that. It seems to say that its missing the controls, but are they not there? i've tried predefining them and that just ends up with the select statements being empty. Any ideas?

also ignore the json data in the video, thats just for testing purposes. If you want you can look through it to make sure i have everything right lol

image.png image.png image.png image.png image.png image.png
#

i know its a lot to look at, but i would really appreciate it if someone could help me here

livid estuary
#

Please read #how-to-get-help and post a complete minimal repro as a stackblitz. Debugging videos and images isn't the easiest thing to do.

shell fractal
#

oops sorry, for some reason that chat only appears after i click on that link

#

here's a stackblitz with a similar structure to my website

#

this is my first time using stackblitz so let me know if i did that wrong

#

instead of changing tabs like in the video i added a button that ends up doing the same thing

livid estuary
#

Thank you. Now what is the issue? Give the scenario that I should follow (precisely), tell what you expect to happen, and what happens instead.

shell fractal
#

alright

#

the issue is that the selects aren't populating correctly, and i think its because i have the form's structure wrong. What i expect to happen is you should be able to choose a D&D class from the dropdown on the top, and then the bottom part that says "no class selected" will instead say something along the lines of "list description: choose x from x, y, z". For barbarian, the first option, there should be two select statements, in one set. For bard, the second option, there should be six select statements, split into two sets. Ideally, these select statements will all be fully populated with their intended values, which should be said in the list description. Finally, i want to be able to retrieve this data from the selects later on in the form and during submission.

Instead, what happens is that when you choose a class, some/all of the select statements are there but not populated with values. They're just empty selects. If you press the button at the top of the page (which has zero code attached to it, it does absolutely nothing) then the select statements start populating, one at a time for each button press. I have no idea why this happens and i can't figure out the problem here. It is giving some errors in the console about not being able to find controls, so i think the issue is probably due to the form's structure. as you can probably see from the code i don't really know how to structure forms correctly so that might be it. Either way i don't know how to fix it

#

thanks for the help

#

i also added a display on the page above each set and select so you can see how its counting

livid estuary
#

You have, in your template, <select formArrayName="profSelects">.
This isn't correct for two reasons:

  1. A select must be bound to a form control, not to a form array. So it should be formControlName, not formArrayName
  2. there is nothing named profSelects inside this form structure.
    The structure of your form, in the TypeScript code, is
classProficiencies: FormArray
  i: FormGroup {
       list_desc: FormControl
       selects: FormArray
         j: FormGroup {
              prof_list: FormControl
              option: FormControl
            }
     }

But in the template you have

formArrayName="classProficiencies" // correct, matches with the TS
  [formGroupName]="i" // correct
    [formGroupName]="j" // incorrect. you should have formArrayName=selects before that
      <select formArrayName="profSelects"> // incorrect it should be formControlName, and be bound to either prof_list or option
shell fractal
#

one more thing though, small compared to the previous problem but now the select boxes default as empty, is there a way to fix that? i want it to default to showing the first option

image.png