首页 其他开发 Angular 2 Form“无法找到带有路径的控件"
Angular 2 Form“无法找到带有路径的控件"
[英] Angular 2 Form "Cannot find control with path"
本文介绍了Angular 2 Form“无法找到带有路径的控件"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试制作一个动态表单(这样你就可以无限地向列表添加项目)，但不知何故我的列表内容没有被发送，因为它找不到带有路径的控件:
<块引用>
找不到带有路径的控件:'list_items -> list_item'
我的组件:
@Component({选择器:应用列表"，templateUrl: './list.component.html',styleUrls: ['./list.component.css']})导出类 ListComponent 实现 OnInit {listForm:表单组；构造函数(私有 nodeService:NodeService，私有 messageService:MessageService，私有 fb:FormBuilder，私人列表服务:列表服务){this.listForm = this.fb.group({标题: ['', [Validators.required, Validators.minLength(5)]],list_items: this.fb.array([this.initListItem(),])});}initListItem() {返回 this.fb.group({项目清单: ['']});}initListItemType() {返回 this.fb.group({list_item_type: ['']});}添加列表项(){const control = <FormArray>this.listForm.controls['list_items'];control.push(this.initListItem());}模板(list.component.html):
添加列表 <form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)"><div class="form-group"><input type="text" class="form-control" formControlName="title" placeholder="Title"> <div formArrayName="list_items"><div *ngFor="let list_item of listForm.controls.list_items.controls; let i=index" class="panel panel-default">{{i + 1}}.)
<a (click)="addListItem()">添加列表项+</a>
<button type="submit">提交</button></表单>
标题工作正常，但我找不到导致错误的formControlName"错误.
在此先感谢您对此问题的任何帮助.
更新我所做的更改 list.component.html
添加列表 <form [formGroup]="listForm" novalidate (ngSubmit)="addList(listForm)"><div class="form-group"><input type="text" class="form-control" formControlName="title" placeholder="Title"> <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">
<a (click)="addListItem()">添加列表项+</a>
<button type="submit">提交</button></表单>
在我的组件中，我更改了构造函数和 addListItem 方法:
listForm:FormGroup；构造函数(私有 nodeService:NodeService，私有 messageService:MessageService，私有 fb:FormBuilder，私人列表服务:列表服务){this.listForm = this.fb.group({标题: ['', [Validators.required, Validators.minLength(5)]],list_items: this.fb.array([[''],])});}添加列表项(){const control = <FormArray>this.listForm.controls['list_items'];control.push(this.fb.control(['']));控制台日志(控制)}
解决方案
HTML 表单中应该有一个 formControlName 映射到您的组件文件.
<div *ngFor="let list_item of [0,1,2];让我=索引"class="panel panel-default">{{i + 1}}.)
list_items: this.fb.array([[''],//0指向这个[''],//1指向这个['']//2指向this])
I try to make a dynamic form (so you can limitless add items to a list), but somehow the content of my list is not getting send because it can't find the control with path:
Cannot find control with path: 'list_items -> list_item'
My component:
@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());
}
The Template (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>
The title works just fine, but I can't find the error I have with the "formControlName", which is causing the error.
Thanks in advance for any help in this issue.
Update with what I changed
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>
And in my component I changed the constructor and my addListItem method:
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([
[''],
])
});
}
addListItem() {
const control = <FormArray>this.listForm.controls['list_items'];
control.push(this.fb.control(['']));
console.log(control)
}
解决方案
There should be a formControlName in your HTML form mapped to your component file.
<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
])
这篇关于Angular 2 Form“无法找到带有路径的控件"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
