Angular Form Array – Dynamically Add Value to Nested Form Group

I followed the this video to create a reactive form to input data into an Angular application I am working on. It does what I want for the most part, however, I have added an additional control(“setNumber”) to be added in the reactive form array, but instead of inputting a value through the input fields of “name” and “gender”, to enter it into the form I would like the value to auto-populate to the getUserForm group/submittable form automatically based on the iteration of the component .

I would ideally like it to display next to name and gender as well as be placed within the form

I put the code on StackBlitz here, where I just have setNumber(core>service>exerciseInput.service.ts) as its own input field and it does indeed update the form to be submitted…but for some reason there I am getting a type error on stackblitz that I am not getting in VSC. But its the code I am using and it works fine on my machine.

Application view

Anyway from stackblitz I believe I should be able to use property binding somewhere to pass i as a value into the component(not just the view as shown in the span string interpolation) so that the form automatically populates i as the setNumber within the userArray, but I’ve had no luck in my attempts over the last few days.

The fix should really be something incredibly easy I’m overlooking in the following block of code in input-array.component.html but I just cant get it to work.

<div *ngFor="let u of userArray.controls; index as i"> 
<span>Set {{ i + 1 }}</span>
<app-input [inputFormGroup]="$any(u)"></app-input>
<button (click)="removeUser(i)">Delete</button>
</div>

I would be incredibly grateful for any help!

Thank you

Answer

In your stackblitz, the type errors were fixed by adding form1: FormGroup in InputArrayComponent (I had to add types elsewhere too). Also, there were errors with regards to importing scss files that weren’t there.

In any case, I may have misunderstood your question, but if you simply want to pass the value of i+1 to the input component and set that value to the FormControl of “setNumber”, you simply add an Input() value to InputComponent (I’ve called it index):

@Input() index: number;

Then in the InputArrayComponent template I pass i+1 to the inputComponent

<app-input [index]="i+1" [inputFormGroup]="$any(u)"></app-input>

And in ngOninit() for the inputArray I assign the value:

this.inputFormGroup.get('setNumber').setValue(this.index);

Here’s the stackblitz:

https://stackblitz.com/edit/angular-ivy-2rwlwu?file=src/app/views/input/input.component.html

— EDIT —

Your comment made clear an issue with deleting users – the index doesn’t update. To have the index update automatically as users are deleted, you need to have the logic be performed any time the input changes, which can be done with a set function:

@Input() set i(value: number) {
   this.index = value;
   this.inputFormGroup.get('setNumber')?.setValue(value);
};

The issue with this is that it overwrites any changes to setNumber that the user may have made. There are ways around it, but my gut tells me it doesn’t make sense for this value to be edited anyway.

So you could simply replace the input with a label that holds the value of index. The value will still appear in the form group (and in the submitted result), but there’s no way for the user to edit it.

I’ve forked the stackblitz again with the differences:

https://stackblitz.com/edit/angular-ivy-hhhz9m?file=src/app/views/input/input.component.html