javascript - Knytte inndata-kontroller til forskjellige elementer inne i FormArray

Jeg står overfor følgende problem og jeg er usikker på hvordan jeg skal løse det, her er et minimalt eksempel https://stackblitz.com/edit/angular-ivy-vwq15f .

I dette eksemplet prøver jeg å binde de to inndatafeltene (navn og kjønn)

  <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>

dynamisk til et element inne i en FormArray. Ved å klikke på personen (Person #1) vil jeg kunne endre de spesifikke egenskapene til den personen med de oppgitte inndatafeltene. Løsningen bør kunne velge en person for å redigere egenskapene UTEN å generere nye inndatafelter.

Jeg antar at jeg på en eller annen måte må binde til formControlName til den spesifikke Input-en som [formControlName="blabla", men jeg er veldig usikker.

Tusen takk på forhånd :)

Min html ser slik ut

<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>

Min .ts ser slik ut

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
  }


}

Vennligst gi meg beskjed hvis det er noe som er uklart med spørsmålet mitt.

Svar #1

Du har en FormArray av FormGroup, så du kan lage en funksjon som returnerer denne 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

  }

Så du kan føle deg fri til å bruke denne funksjonen i html for å indikere FormGroup

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

Ja, det er ikke nødvendig å bruke FormArray. Dessuten har .html-filen ingen referanse til parentForm. Vel, det eneste du trenger er at knappene dine endrer variabelen inspectedForm.

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

din forgreinede stackblitz