Binding Input Controls to different elements inside FormArray

Question

I'm facing the following issue and I am unsure how to solve it, here is a minimal example https://stackblitz.com/edit/angular-ivy-vwq15f .

In this example I am trying to bind the two input field (name and gender)

  <div formArrayName="formArray" class="column">
<div [formGroupName]="inspectedForm">
  <h1>Input field for Person {{inspectedForm +1}}</h1>
  <label for="name">name</label>
  <input formControlName="name" type="text" class="input" placeholder="Name">
  <label for="gender">gender</label>
  <input formControlName="gender" >
</div>

dynamically to an element inside a FormArray. By clicking on the person (Person #1) I want to be able to change the specific properties that person with the provided input fields. The solution should be capable of selecting a person to edit the properties WITHOUT generating new Input fields.

I guess I must somehow bind to the formControlName of the specific Input like [formControlName="blabla" but I am very unsure.

Thanks a lot in advance :)

My html looks like this

<form [formGroup]="parentForm">
  <div *ngFor="let rule of arrayForm.controls; let i = index" class="button is-fullwidth not-clickable">
    <button (click)="changeInspectedElement(i)">Person {{i +1}}</button>

  </div>
  <button (click)="addElement()">Add Element</button>
  <div formArrayName="formArray" class="column">
    <div [formGroupName]="inspectedForm">
      <h1>Input field for Person {{inspectedForm +1}}</h1>
      <label for="name">name</label>
      <input formControlName="name" type="text" class="input" placeholder="Name">
      <label for="gender">gender</label>
      <input formControlName="gender" >
    </div>
  </div>
</form>

<p>
  {{parentForm.value | json}}
</p>

My .ts looks like this

import { Component } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  parentForm: FormGroup
  inspectedForm: number = 0

  constructor(private _fb: FormBuilder,) {
    this.parentForm = this._fb.group({
      formArray: this._fb.array([
        this.createArrayForm()
      ])
    })
  }

  createArrayForm() {
    return this._fb.group({
      name: [''],
      gender: ['']
    })
  }

  changeInspectedElement(index) {
    let value = this.arrayForm.value[index]
    this.inspectedForm = index
  }

  addElement() {
    this.arrayForm.push(this.createArrayForm())
  }

  get arrayForm() {
    return this.parentForm.get('formArray') as FormArray
  }


}

Please let me know if there is anything unclear about my question.

Answer 1

You has a FormArray of FormGroup, so, you can create a function that return this formGroup

  getGroup(index)
  {
    return (this.parentForm.get('formArray') as FormArray).at(index) as FormGroup
    //or using your function arrayForm
    //return this.arrayForm.at(index) as FormGroup

  }

So, you can feel free to use this function in html to indicate FormGroup

<div [formGroup]="getGroup(inspectedForm)">
  <input formControlName="name" type="text" class="input" placeholder="Name">
  <input formControlName="gender" >

Yes, it's not necesary use FormArray. futhermore, in the .html has no reference to parentForm. Well the only you need is that your buttons change the variable inspectedForm.

<button (click)="inspectedForm=i">Person {{i +1}}</button>

your forked stackblitz