Angular: how to loop through a FormArray which is nested in a FormGroup which is already nested in a different FormGroup?

Question

I use this block of code to create my form:

@Input() fetchedTask: Task;
taskForm: FormGroup;
formThresholds: FormArray;

this.taskForm = this._formBuilder.group({
            taskId: null,
            groupId: this.groupId,
            name: ["", [Validators.required]],
            taskType: this.taskTypeId,
            etc.
            configuration: this._formBuilder.group({
                name: ["", Validators.required],
                path: ["", Validators.required],
                thresholds: this._formBuilder.array([])
            })
        });

I later set values of the form using setValue():

this.taskForm.controls["taskId"].setValue(this.fetchedTask.taskId);

I set the value of my FormArray using:

this.fetchedTask.configuration.thresholds.forEach((x)=>{
              this.addItem(x.value, x.name);
            })

addItem(value: number, name: string): void {
      this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
      this.formThresholds.push(this.createItem(value, name));
    }

createItem(value: number, name: string): FormGroup{
      return this._formBuilder.group({
        value: value,
        name: name
      });
    }

I really don't know how to approach looping through my array values and showing them in my form, with populated values.

I tried this but with no success:

        <div *ngFor="let threshold of taskForm.get('configuration.thresholds') let i = index;">
            <div [formGroupName]="i">
                <input formControlName="name" placeholder="Threshold name">
                <input formControlName="value" placeholder="Threshold value">
            </div>
        </div>

try this taskForm['controls'].configuration.thresholds['controls'] — Gourav Garg
– Gourav Garg, Commented Apr 8, 2020 at 9:08
@GouravGarg I get this error when trying your suggestion: Property 'thresholds' does not exist on type 'AbstractControl'. — Frets
– Frets, Commented Apr 8, 2020 at 9:12
Can you try this ? taskForm['controls'].configuration['controls'].thresholds['controls'] or you simply can create a get property like get formArray():FormArray{return this.taskForm.get('configuration.thresholds') as FormArray;} — Gourav Garg
– Gourav Garg, Commented Apr 8, 2020 at 9:16

Gourav Garg · Accepted Answer · 2020-04-08 09:21:01Z

3

Either you can directly put in HTML as below:

*ngFor="let threshold of taskForm['controls'].configuration['controls'].thresholds['controls']; let i = index;"

or you can create a get property in component and use in html or ts file as well.

get formThresholds():FormArray{
    return this.taskForm.get('configuration.thresholds') as FormArray;
}

answered Apr 8, 2020 at 9:21

Gourav Garg

2,92114 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Frets Over a year ago

taskForm['controls'].configuration['controls'].thresholds['controls']; did the trick! But now I'm getting an interesting set of errors: "Cannot find control with name: '0'", "Cannot find control with path: '0 -> name'", Cannot find control with path: '0 -> value'. I've checked, and there is one FromGroup in my thresholds FormArray.

Gourav Garg Over a year ago

Can you check if return value of taskForm['controls'].configuration['controls'].thresholds['controls'][0].get('name') in console?

Frets Over a year ago

I've tried adding formArrayName="formThresholds" in my div tag:

<div formArrayName="formThresholds" *ngFor="let threshold of this.taskRunProfileForm['controls'].configuration['controls'].thresholds['controls']; let i = index;">

but now I get an extra step in my erro messages: "Cannot find control with name: 'formThresholds'", "Cannot find control with path: 'formThresholds -> 0'", "Cannot find control with path: 'formThresholds -> 0 -> name'"

Gourav Garg Over a year ago

add this in formArrayName="formThresholds"

Frets Over a year ago

I did, the comment before yours. The return value of taskForm['controls'].configuration['controls'].thresholds['controls'][0].get('name') is as expected: value:"Duration". Interestingly I get a blank input for name and value property but there are no values in those inputs. I've tried changing places where I initialize my form and bind data from NgOnChanges to NgOnInit, same results.

|

Frets · Accepted Answer · 2020-04-08 11:50:47Z

Thanks to Gourav Garg and my fiddling I came up with an answer.

The problem was that I missed a parent div tag referring to the formGroup in which the formArray belongs - the 'configuration' form group.

So for this form structure:

this.taskForm = this._formBuilder.group({
            taskId: null,
            groupId: this.groupId,
            name: ["", [Validators.required]],
            taskType: this.taskTypeId,
            etc.
            configuration: this._formBuilder.group({
                name: ["", Validators.required],
                path: ["", Validators.required],
                thresholds: this._formBuilder.array([])
            })
        });

get thresholds(): FormArray{
      return this.formThresholds = this.taskForm.get('configuration.thresholds') as FormArray;
    }

if I want to show values from the threshold on my page I need 4 tags. Example:

<form [formGroup]="taskForm">
    <div formGroupName="configuration">
        <div formArrayName="thresholds"
            *ngFor="let threshold of this.taskRunProfileForm['controls'].configuration['controls'].thresholds['controls']; let i = index;">
            <div [formGroupName]="i">
                {{name.value}}
                {{value.value}}
            </div>
        </div>
    </div>
</form>

Collectives™ on Stack Overflow

Angular: how to loop through a FormArray which is nested in a FormGroup which is already nested in a different FormGroup?

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related