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