无法读取未定义的属性“setParent”

Question

我正在使用 Angular 6 反应形式，并且我在子组件中有一个表格：

<div formArrayName="_server">
<table id="_server" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Host name</th>
            <th>IP</th>
            <th>Domain</th>
            <th>OS</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>

        <tr *ngFor="let server of serverForms.controls; let i=index" [formGroupName]="i">
            <td>
                <input formControlName="HostName" class="form-control" type="text" />
            </td>
            <td>
                <input formControlName="IPAddress" class="form-control" type="text" />
            </td>
            <td>
                <input formControlName="Domain" class="form-control" type="text" />
            </td>
            <td>
                <input formControlName="OS" class="form-control" type="text" />
            </td>
            <td class="buttonCenter">
                <button mat-raised-button color="primary" class="deleteFieldButton" (click)="deleteServer(i)" type="button">delete</button>
            </td>
        </tr>
    </tbody>
    <button mat-raised-button color="primary" class="addFieldButton" (click)="addServer()" type="button">Add new server</button>

</table>

我正在将表格从家长处传递给孩子。

在ts文件中可以看到：

  childForm;
  constructor(private parentF: FormGroupDirective) { }

  ngOnInit() {

    this.childForm = this.parentF.form;
    this.childForm.get('_server') as FormArray;

}

  get serverForms() {
    return this.childForm.get('_server') as FormArray
  }

  addServer() {

    const server = this.childForm.addControl('_server', new FormGroup({
      HostName: new FormControl([]),
      IPAddress: new FormControl([]),
      Domain: new FormControl([]),
      OS: new FormControl([]),

    }))

    this.serverForms.push(server);
  }

  deleteServer(i) {
    this.serverForms.removeAt(i)
  }

deleteServer 方法运行良好，但 addServer() 不起作用 - 我收到错误：无法读取未定义的属性“setParent”。

请指教！ 谢谢！

Answer 1

试试这个，它有效

parent.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, FormBuilder } from '@angular/forms';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular';
  form;
  constructor() {
    this.form = new FormGroup({
      arr: this.buildArray()
    })
  }
  ngOnInit() {
    console.log(this.form.get('arr').value);
  }
  get arr() {
    return this.form.get('arr').value;
  }
  buildGroup() {
    return new FormGroup({
      HostName: new FormControl([]),
      IPAddress: new FormControl([]),
      Domain: new FormControl([]),
      OS: new FormControl([]),
    })
  }
  buildArray() {
    return new FormArray([this.buildGroup()])
  }
  deleteServer(i) {
    this.form.get('arr').removeAt(i)
  }
  trackByFn(index: any, item: any) {
    return index;
  }
}

child.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormArray, ControlContainer, FormGroupDirective } from '@angular/forms';
@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css'],
  viewProviders: [{ provide: ControlContainer, useExisting: FormGroupDirective }]
})
export class TableComponent implements OnInit {
  childForm;
  constructor(private parentF: FormGroupDirective) { }

  ngOnInit() {

    this.childForm = this.parentF.form;
    this.childForm.get('_server') as FormArray;
  }
  get serverForms() {
    return this.childForm.get('arr') as FormArray
  }

  add() {
        this.childForm.get('arr').push(this.buildGroup());     
  }

  buildGroup() {
    return new FormGroup({
      HostName: new FormControl(''),
      IPAddress: new FormControl(''),
      Domain: new FormControl(''),
      OS: new FormControl(''),
    })
  }    
}

示例：https://stackblitz.com/edit/angular-kin9jq

Answer 2

我在不使用

FormGroupDirective

的情况下做 FormArray 考虑这样

组件

  childForm: FormArray;
  constructor() {
    this.childForm = new FormArray([]);
  }

  addServer() {
    this.childForm.push(new FormGroup({
      HostName: new FormControl(),
      IPAddress: new FormControl(),
      Domain: new FormControl(),
      OS: new FormControl(),
    }));
  }

  deleteServer(i) {
    this.childForm.removeAt(i)
  }

这就是我在模板中所做的更改

<div formArrayGroup="childForm">

NGFor

<tr *ngFor="let frm of childForm.controls; let i=index" [formGroup]="frm">

stackblitz 演示 👌