angular - 无法读取未定义的属性“setParent”
问题描述
我正在使用 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”。
请指教!谢谢!
解决方案
试试这个它的工作
父组件.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(''),
})
}
}
推荐阅读
- javascript - React-Native多行TextInput组件:当可编辑设置为false时如何允许滚动
- html - 我怎样才能让这个图像背景只出现在该部分的一半?
- r - 如何获取任何列中的值大于值的行?
- laravel - 选择特定选项后的 Laravel sortby
- terraform - 启动模板名称已在使用错误
- python - 在 Python Web 服务中同时接收和处理大量数据
- java - 将身份验证凭据传递到 gradle.properties
- android - ActionBar 可见性的 Observable/LiveData?
- python - 用'x'替换列表中的重复值?
- android - 编辑文本不显示值