将输入控件绑定到 FormArray 中的不同元素

Question

我面临以下问题，我不确定如何解决，这是一个最小的示例https://stackblitz.com/edit/angular-ivy-vwq15f。

在本例中，我尝试绑定两个输入字段（姓名和性别）

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

动态到 FormArray 中的元素。通过单击人（Person #1），我希望能够使用提供的输入字段更改该人的特定属性。该解决方案应该能够选择一个人来编辑属性而不生成新的输入字段。

我想我必须以某种方式绑定到特定输入的 formControlName，例如 [formControlName="blabla"，但我非常不确定。

提前非常感谢:)

我的 html 看起来像这样

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

我的 .ts 看起来像这样

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
  }


}

如果我的问题有任何不清楚的地方，请告诉我。

Answer 1

你有一个FormGroup的FormArray，所以，你可以创建一个返回这个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

  }

所以，你可以随意在html中使用这个函数来表示FormGroup

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

是的，没有必要使用 FormArray。此外，在 .html 中没有对 parentForm 的引用。那么你唯一需要的是你的按钮改变变量inspectedForm。

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

你的forked stackblitz