- 首页
- 其他开发
- Angular 2 使用 FormBuilder 访问嵌套的 FormArrays
Angular 2 使用 FormBuilder 访问嵌套的 FormArrays
[英] Angular 2 Accessing Nested FormArrays using FormBuilder
本文介绍了Angular 2 使用 FormBuilder 访问嵌套的 FormArrays的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
首先，我只是从 Angular 2 开始，我正在尝试构建一个嵌套表单并对其进行验证.
这是我的 ts 文件的一部分:
ngOnInit() {this.myForm = this.formBuilder.group({项目:this.formBuilder.array([this.initProjects()])});}initProjects(): 任何 {返回 this.formBuilder.group({名称:['', [Validators.required, Validators.minLength(3)]],some_array: this.formBuilder.array([this.formBuilder.group({名称:['', Validators.required],attr: ['', Validators.required],some_id: [1, Validators.required]})])});}添加项目():无效{常量控制 = <表格阵列 >this.myForm.controls['projects'];control.push(this.initProjects());}
查看:
<div *ngFor="let some_obj of project.controls.some_array.controls; let x = index"><div [formGroupName]="x"><div><md-input placeholder="Nome" formControlName="controls.some_array.controls.name"></md-input><small *ngIf="!some_obj.controls.name.valid">Nome é requerido</小>
<md-input type="number" placeholder="Cost" formControlName="controls.some_array.controls.attr" required></md-input>
<button type="submit" md-raised-button color="primary" [disabled]="!myForm.valid">Submit</button></表单><pre>表单值:<br>{{myForm.value |json}}</pre>
表单值的输出:
表单值:{项目":[{姓名": ""，some_array":[{姓名": ""，"属性": "",some_id":1}]},{姓名": ""，some_array":[{姓名": ""，"属性": "",some_id":1}]}]}
好吧，如您所见，我有一些称为项目的数组，每个数组中有 1 个数组.
所以问题是我无法验证 some_array 数组的每个控件.
实际上我收到以下错误:
ORIGINAL EXCEPTION: 找不到带有路径的控件:'projects -> 0 -> controls.some_array.controls.namePS:我已经尝试把它放在一个div中，如下:
但我也遇到了一个错误:
找不到带有路径的控件:'projects -> some_array'提前致谢.任何帮助将不胜感激.
解决方案
试试下面的 HTML:
First of all I just begin with Angular 2 and I'm trying to build a nested form and validate it.
Here's part of my ts file:
ngOnInit() {
this.myForm = this.formBuilder.group({
projects: this.formBuilder.array([
this.initProjects()
])
});
}
initProjects(): any {
return this.formBuilder.group({
name: ['', [Validators.required, Validators.minLength(3)]],
some_array: this.formBuilder.array([
this.formBuilder.group({
name: ['', Validators.required],
attr: ['', Validators.required],
some_id: [1, Validators.required]
})
])
});
}
addProject(): void {
const control = < FormArray > this.myForm.controls['projects'];
control.push(this.initProjects());
}
View:
<form [formGroup]="myForm" novalidate (ngSubmit)="onSubmit(myForm)">
<div formArrayName="projects">
<div *ngFor="let project of myForm.controls.projects.controls; let i = index">
<div [formGroupName]="i">
<md-input placeholder="Name" formControlName="name"></md-input>
</div>
<div *ngFor="let some_obj of project.controls.some_array.controls; let x = index">
<div [formGroupName]="x">
<div>
<md-input placeholder="Nome" formControlName="controls.some_array.controls.name"></md-input>
<small *ngIf="!some_obj.controls.name.valid">
Nome é requerido
</small>
</div>
<md-input type="number" placeholder="Cost" formControlName="controls.some_array.controls.attr" required></md-input>
</div>
</div>
</div>
</div>
<button type="submit" md-raised-button color="primary" [disabled]="!myForm.valid">Submit</button>
</form>
<pre>form value: <br>{{myForm.value | json}}</pre>
The output of form value:
form value:
{
"projects": [
{
"name": "",
"some_array": [
{
"name": "",
"attr": "",
"some_id": 1
}
]
},
{
"name": "",
"some_array": [
{
"name": "",
"attr": "",
"some_id": 1
}
]
}
]
}
Well, as you can see I have some arrays called projects, with 1 array inside each one.
So the problem is that I'm not able to validate each control of some_array array.
Actually I'm getting the following error:
ORIGINAL EXCEPTION: Cannot find control with path: 'projects -> 0 -> controls.some_array.controls.name
PS: I already tried to put it in a div, as below:
But I also got an error:
Cannot find control with path: 'projects -> some_array'
Thanks in advance. Any help would be appreciated.
解决方案
Try the following HTML:
<form [formGroup]="myForm" novalidate (ngSubmit)="onSubmit(myForm)">
<div formArrayName="projects">
<div [formGroupName]="i" *ngFor="let project of myForm.controls.projects.controls; let i = index">
<md-input placeholder="Name" formControlName="name"></md-input>
<div formArrayName="some_array">
<div [formGroupName]="x" *ngFor="let some_obj of project.controls.some_array.controls; let x = index">
<div>
<md-input placeholder="Nome" formControlName="name"></md-input>
<small *ngIf="!some_obj.controls.name.valid">Nome é requerido</small>
</div>
<md-input type="number" placeholder="Cost" formControlName="attr" required></md-input>
</div>
</div>
</div>
</div>
<button type="submit" md-raised-button color="primary" [disabled]="!myForm.valid">Submit</button>
</form>
<pre>form value: <br>{{myForm.value | json}}</pre>
这篇关于Angular 2 使用 FormBuilder 访问嵌套的 FormArrays的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
