Angular 两个 FormArray 内的嵌套 formGroup 中的 12 个 FormControl

Question

我正在尝试构建具有这种结构的动态表单：

Form
-|FormGroup
--|FormArray
---|FormGroup
----|FormControl
----|FormArray
-----|FormGroup
------|FormControl <-- Problem that I cannot bind this form control to input
------|FomrControl <-- Problem that I cannot bind this form control to input

在两个指定的控件上出现错误

Cannot find control with path: 'items -> 0 -> properties -> 1'

我猜可能是因为 let rowItem of items.controls[i].value.properties; let j=index

有问题

尝试了很多不同的方案都没有成功。例如：

let rowItem of items.controls[i].properties; let j=index

给予

Property 'properties' does not exist on type 'AbstractControl'.

StackBlitz

在 StackBlitz 上，它也无法正常工作。

如能提供有关如何将这些 FormControl 连接到输入的建议，我将不胜感激。

Html代码：

<form [formGroup]="myForm">
<div formArrayName="items">
  <div *ngFor="let item of items.controls; let i=index">
    <div [formGroupName]="i">
      <input formControlName="word" matInput>
      <div formArrayName="properties">
        <div *ngFor="let rowItem of items.controls[i].value.properties; let j=index">
          <div [formGroupName]="j">
            <input formControlName="property" matInput>
            <input formControlName="value" matInput>
          </div>
        </div>
        <br>
      </div>
      <button (click)="addWordProperty(items.controls[i].value.properties)">Add property</button>
      <br>
    </div>
  </div>
  <button (click)="addWord()">Add word</button>
</div>
</form>

{{ myForm.value | json }}

键入脚本代码：

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

@Component({
  selector: 'app-infinitive',
  templateUrl: './infinitive.component.html',
  styleUrls: ['./infinitive.component.css']
})
export class InfinitiveComponent {

  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      items: this.fb.array([
        this.fb.group({
          word: this.fb.control(''),
          properties: this.fb.array([
            this.fb.group({
              property: this.fb.control(''),
              value: this.fb.control('')
            })
          ]),
        })
      ])
    })
  }

  addWordProperty(control: any) {
    var items = control as FormArray;
    items.push(this.fb.control(''));
  }

  addWord() {
    var array = this.myForm.get('items') as FormArray;
    array.push(this.fb.group({
      word: this.fb.control(''),
      properties: this.fb.array([
        this.fb.group({
          property: this.fb.control(''),
          value: this.fb.control('')
        })
      ]),
    }));
  }
  get items() {
    return this.myForm.get('items') as FormArray;
  }
}

Answer 1

<form [formGroup]="myForm">
<div formArrayName="items">
  <div *ngFor="let item of items.controls; let i=index">
    <div [formGroupName]="i">
      <input formControlName="word" matInput>
      <div formArrayName="properties">
        <div *ngFor="let rowItem of items.controls[i].controls['properties'].controls; let j=index">
          <div [formGroupName]="j">
            <input formControlName="property" matInput>
            <input formControlName="value" matInput>
          </div>
        </div>
        <br>
      </div>
      <button (click)="addWordProperty(items.controls[i].value.properties)">Add property</button>
      <br>
    </div>
  </div>
  <button (click)="addWord()">Add word</button>
</div>
</form>

Angular 两个 FormArray 内的嵌套 formGroup 中的 12 个 FormControl

Angular 12 FormControls in nested formGroup inside of two FormArrays

angular12