Nested forms throwing errors

[gray sluice]

Heyyo I have a part of my app that requires me to allow users to include a variable number of questions in a quiz, and in each question, allow for a variable number of possible options.

When I use the buttons to add or remove options, or when I pipe my result to JSON (in the HTML below), I get this error.

ERROR Error: Cannot find control with path: '0 -> quizQuestion -> 0_0 -> wrongOptions'
    at _throwError (forms.mjs:3199:11)
    at setUpControl (forms.mjs:2985:13)
    at FormGroupDirective.addControl (forms.mjs:4853:9)
    at FormControlName._setUpControl (forms.mjs:5409:43)
    at FormControlName.ngOnChanges (forms.mjs:5354:18)
    at FormControlName.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:1526:14)
    at callHook (core.mjs:2508:18)
    at callHooks (core.mjs:2467:17)
    at executeInitAndCheckHooks (core.mjs:2418:9)
    at refreshView (core.mjs:11992:21)

This is the HTML from the component...
https://appp.me/TtYn6g

and the TypeScript...
https://appp.me/j3XkRs

[cedar spire]

Why are you using this syntax? [formGroupName]="i + '_' + j"

[gray sluice]

I’m trying to make it so I can uniquely identify each option! A stack overflow search yesterday said not to use

formGroupName=“{i}_{j}”

[cedar spire]

Where do you need to identify them uniquely?

[gray sluice]

For deletion

on line 68, for the TypeScript file

[cedar spire]

yes, but it's unrelated to this i + '_' + j syntax, why using it here?

The formGroupName is a way for angular to understand the scope of your form.
By using it in a parent html node, Angular is able to resolve formControlName="correctAnswer" by following a path (the path showcased in the error log).

From the formGroup, Angular is looking to:

• [formGroupName]="i" to find the proper item of the question FormArray with its index
• then to [formGroupName]="i + '_' + j" to find the proper item of the option FormArray with its index

The error log is '0 -> quizQuestion -> 0_0 -> wrongOptions'.
The first 0 refers to the question FormArray index, 0_0to the question FormArray index.

0_0 feels like more an emoji than an index.
Uses simply j for the formGroupName value

[gray sluice]

Ahhh ok, I see

yeah 0_0 does look like an emoji LOL, one I would have used when I saw the stack trace

I still get the same error though, just with i_j replaced with j

[cedar spire]

Here is a working example: https://stackblitz.com/edit/stackblitz-starters-1evxne?description=An angular-cli project based on @angular/animations, @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, core-js, rxjs, tslib and zone.js&file=src%2Fmain.ts&template=node&title=Angular Starter

As explained you need to reproduce the structure of your TS form on the template side.
You were missing some steps.

[gray sluice]

Ahh ok I see how it works, I reckon I designed the tempate wrong for it to be that verbose

Thank you, I get how the adding works. Everything seems to be ok except deleting, hopefully I can brain this part on my own but will be back if I get stuck

oop got that too