javascript - 将输入控件绑定(bind)到 FormArray 中的不同元素

Question

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

在这个例子中，我试图绑定(bind)两个输入字段(姓名和性别)

  <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 中的一个元素。通过单击人(人 #1)，我希望能够使用提供的输入字段更改该人的特定属性。该解决方案应该能够选择一个人来编辑属性，而无需生成新的输入字段。

我想我必须以某种方式绑定(bind)到特定输入的 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