我尝试制作一个动态表单(这样你就可以无限制地将项目添加到列表中),但不知何故我的列表内容没有得到发送,因为它无法找到带路径的控件：
Cannot find control with path: ‘list_items -> list_item’
我的组件：
@Component({
selector: 'app-list',templateUrl: './list.component.html',styleUrls: ['./list.component.css']
})
export class ListComponent implements OnInit {
listForm: FormGroup;
constructor(private nodeService: NodeService,private messageService: MessageService,private fb: FormBuilder,private listService: ListService) {
this.listForm = this.fb.group({
title: ['',[Validators.required,Validators.minLength(5)]],list_items: this.fb.array([
this.initListItem(),])
});
}
initListItem() {
return this.fb.group({
list_item: ['']
});
}
initListItemType() {
return this.fb.group({
list_item_type: ['']
});
}
addListItem() {
const control = <FormArray>this.listForm.controls['list_items'];
control.push(this.initListItem());
}
模板(list.component.html)：
<h2>Add List </h2>
<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)">
<div class="form-group">
<input type="text" class="form-control" formControlName="title" placeholder="Title">
</div>
<div formArrayName="list_items">
<div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">
{{i + 1}}.) <input type="text" formControlName="list_item" placeholder="List Item" class="form-control">
</div>
<a (click)="addListItem()">Add List Item +</a>
</div>
<button type="submit">Submit</button>
</form>
标题工作正常,但我找不到我对“formControlName”的错误,这导致错误.
在此问题上提前感谢您的任何帮助.
更新我改变的内容
list.component.html
<h2>Add List </h2>
<form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)">
<div class="form-group">
<input type="text" class="form-control" formControlName="title" placeholder="Title">
</div>
<div formArrayName="list_items">
<div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">
{{i + 1}}.) <input type="text" formControlName="{{i}}" placeholder="List Item" class="form-control">
</div>
<a (click)="addListItem()">Add List Item +</a>
</div>
<button type="submit">Submit</button>
</form>
在我的组件中,我更改了构造函数和我的addListItem方法：
listForm: FormGroup;
constructor(private nodeService: NodeService,list_items: this.fb.array([
[''],])
});
}
addListItem() {
const control = <FormArray>this.listForm.controls['list_items'];
control.push(this.fb.control(['']));
console.log(control)
}
应该以html格式映射formControlName&你的组件文件.
<div *ngFor="let list_item of [0,1,2]; let i=index" class="panel panel-default">
{{i + 1}}.) <input type="text" formControlName='{{i}}' placeholder="List Item" class="form-control">
</div>
============
list_items: this.fb.array([ [''],//0 points to this [''],//1 points to this [''] //2 points to this ])
