Question

我正在尝试在另一个FormArray中添加一个FormArray，但不知道该怎么做。

我的打字稿文件中有这个

createForm() {
    this.myForm = this.formBuilder.group({
        people: this.formBuilder.array([
            { addresses: this.formBuilder.array([]) }
        ])
    });
}

基本上，我想说的是建立一个人FormArray，每个人可以拥有多个地址。我试图在我的html中这样渲染它：

<div [formGroup]="myForm">
    <div formArrayName="people">
        <div *ngFor="let person of people.controls; let i=index">
            Person {{ i + 1 }}

            <div *ngFor="let address of person.addresses.controls; let j=index">
                Address {{ j + 1 }}
            </div>
        </div>
    </div>
</div>

当然，这只是一个例子，我的实际表格还会有更多的事情要做。我有一个“添加人员”链接，该链接在我的打字稿中调用一个将对象推向人员FormArray的函数。

调用createForm()时，在浏览器中出现以下错误：

ERROR TypeError: this.form._updateTreeValidity is not a function
ERROR TypeError: this.form.get is not a function

我在做什么错？如何完成我想做的事？任何帮助将不胜感激！

Answer 1

尝试类似的方法：

stackblitz example

HTML：

<form [formGroup]="myForm" (ngSubmit)="submit()">
    <div formArrayName="people">
        <div *ngFor="let person of getPeople(myForm); let i=index">
            <div style="margin: 5px;" [formGroupName]="i">
                <label>Person {{ i + 1 }}</label>
                <input type="text" placeholder="Name" formControlName="name">
                <button *ngIf="i<1" (click)="addPeople()" type="button">Add People</button>

                <div formArrayName="addresses">
                    <div *ngFor="let address of getAddress(person); let j=index">
                        <div [formGroupName]="j">
                            <span>Address {{ j + 1 }}</span>
                            <input type="text" placeholder="house No" formControlName="houseNo">
                            <input type="text" placeholder="city" formControlName="city">
                            <button *ngIf="j<1" (click)="addAddress(i)" type="button">+</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<div style="margin-top: 20px;">
    {{myForm.value | json}}
</div>

TS：

import { Component, OnInit } from '@angular/core';
import { FormArray, FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  survey: FormGroup;
  myForm: FormGroup;
  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
    this.createForm();
  }

  createForm() {
    this.myForm = this.fb.group({
      people: this.fb.array([this.createPeopleArray()])
    })
  }

  createPeopleArray() {
    return this.fb.group({
      name: null,
      addresses: new FormArray([
        this.createAddressArray()
      ])
    });
  }

  getPeople(form) {
    return form.controls.people.controls;
  }

  getAddress(form) {
    return form.controls.addresses.controls;
  }

  createAddressArray() {
    return this.fb.group({
      houseNo: null,
      city: null
    })
  }

  addPeople() {
    const control = <FormArray>this.myForm.get('people');
    control.push(this.createPeopleArray());
  }

  addAddress(i) {
    const control = <FormArray>this.myForm.get('people').controls[i].get('addresses');
    // console.log(control);
    control.push(this.createAddressArray());
  }

  submit() {
    console.log(this.myForm.value)
  }
}

Angular5反应性表单：另一个表单数组中的表单数组

1 个答案: