首页 其他开发 如何以angular2反应形式迭代表单数组(数组中的数组)?
如何以angular2反应形式迭代表单数组(数组中的数组)?
[英] How to iterate form array(array in array in array) in angular2 reactive forms?
本文介绍了如何以angular2反应形式迭代表单数组(数组中的数组)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我尝试多次迭代 formArray，
这是本案例的 plunker 链接https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=预览
我想要这样的 plunk https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=预览
这是我的场景
<预><代码>[{身份证":1，"legend": "businessModule",团体": [{身份证":1，允许": {"controleType": "ff",身份证":2，"key": "创建业务"},角色":[{身份证":1，姓名":自己"},{身份证":2，姓名":其他"}]},{身份证":1，允许": {"controleType": "ff",身份证":2，"key": "编辑业务"},角色":[{身份证":1，姓名":自己"},{身份证":2，姓名":其他"}]}]},{身份证":2，"legend": "PanicModule",团体": [{身份证":1，允许": {"controleType": "ff",身份证":2，"key": "制造恐慌"},角色":[{身份证":1，姓名":自己"},{身份证":2，姓名":其他"}]},{身份证":1，允许": {"controleType": "ff",身份证":2，"key": "编辑恐慌"},角色":[{身份证":1，姓名":自己"},{身份证":2，姓名":其他"}]}]}];
对于上面的数组，我尝试构建反应式表单，我需要组
下的
权限、角色数组 复选框
所以我尝试像这样迭代数组
component.ts
validateForm() {this.roleForm = this.fb.group({角色名称:[''，Validators.required]，roleDescription: ['', Validators.required],权限模块:this.fb.array([])});this.initModule()}initModule() {
const contractArray = this.roleForm.controls['permissionModules'];console.log(contractArray, 'contractArray')this.form_objects.forEach(element => {this.newElement = 元素；console.log(this.newElement, 'this.newElement')//element.forEach(group => {contractArray.push(this.fb.group({ID: ['']，图例:this.newElement.legend，组:this.fb.array([ ])}));//}this.initGroup(元素，contractArray)}}initGroup(元素，contractArray){console.log(element, '@@@@@@@@@@@@@@@@@@@@@@@',contractArray)//const groupArray = <FormArray>contractArray.controls['group'];this.groupArray = <FormArray>this.roleForm.controls.permissionModules.controls[1];console.log(this.groupArray, 'groupArray&&&&&&')element.group.forEach(group => {this.newGroup = 组；console.log(this.newGroup, 'this.newGroup')/* if(typeof (this.groupArray) !== 'undefined') {this.groupArray.push(this.fb.group({ID: ['']，图例:this.newGroup.legend}));}*/}}提交(值){this.result = 值} 我的 html 就像
<div class="form-group"><label>roleDescription</label><input type="text" class="form-control" formControlName="roleDescription">
<div class="form-group"><label>权限角色</label><div formArrayName="permissionModules"><div *ngFor="let contract of roleForm.controls.permissionModules.controls;let i=index" class="panel panel-default"><div [formGroupName]="i">{{contract.value.legend}}<!--
<button type="submit">提交</button></表单>
但我无法在上述情况下迭代第二级数组在 initGroup() 函数 groupArray 下，我不知道我的错误是什么，我搜索了很多网站都只告诉一级迭代，我是 angular2 的新手，所以请任何人帮助我提前致谢
解决方案
我解决了我的问题
使用 this.roleForm.controls['permissionModules']).at(k).get('group') 作为 FormArray
语法我能够迭代嵌套数组，
这是 plunk 链接，您可以在其中看到我的方法http://plnkr.co/edit/AVqWKkUCNc1HjosOpUWf?p=preview
I tried to Iterate formArray several times,
This is plunker link for this case https://plnkr.co/edit/4kiJF7cL5VKwn3KnvjvK?p=preview
i want out put like this plunk https://plnkr.co/edit/zg6nbFULl0WlTZ1sVn5h?p=preview
This is my scenario
[
{
"id": 1,
"legend": "businessModule",
"group": [
{
"id": 1,
"permission": {
"controleType": "ff",
"id": 2,
"key": "create Business"
},
"roles": [
{
"id": 1,
"name": "self"
},
{
"id": 2,
"name": "other"
}
]
},
{
"id": 1,
"permission": {
"controleType": "ff",
"id": 2,
"key": "edit business"
},
"roles": [
{
"id": 1,
"name": "self"
},
{
"id": 2,
"name": "other"
}
]
}
]
},
{
"id": 2,
"legend": "PanicModule",
"group": [
{
"id": 1,
"permission": {
"controleType": "ff",
"id": 2,
"key": "create panic"
},
"roles": [
{
"id": 1,
"name": "self"
},
{
"id": 2,
"name": "other"
}
]
},
{
"id": 1,
"permission": {
"controleType": "ff",
"id": 2,
"key": "edit panic"
},
"roles": [
{
"id": 1,
"name": "self"
},
{
"id": 2,
"name": "other"
}
]
}
]
}
];
For above array I tried to build reactive forms , I need checkboxes for permission, roles array under group
So I tried to iterate array like this
component.ts
validateForm() {
this.roleForm = this.fb.group({
roleName: ['', Validators.required],
roleDescription: ['', Validators.required],
permissionModules: this.fb.array([])
});
this.initModule()
}
initModule() {
const contractArray = <FormArray>this.roleForm.controls['permissionModules'];
console.log(contractArray, 'contractArray')
this.form_objects.forEach(element => {
this.newElement = element;
console.log(this.newElement, 'this.newElement')
// element.forEach(group => {
contractArray.push(this.fb.group({
id: [''],
legend:this.newElement.legend,
group: this.fb.array([ ])
}));
// }
this.initGroup(element, contractArray)
}
}
initGroup (element, contractArray) {
console.log(element, '@@@@@@@@@@@@@@@@@@@@@@',contractArray)
// const groupArray = <FormArray>contractArray.controls['group'];
this.groupArray = <FormArray>this.roleForm.controls.permissionModules.controls[1];
console.log(this.groupArray, 'groupArray&&&&&&&')
element.group.forEach(group => {
this.newGroup = group;
console.log(this.newGroup, 'this.newGroup')
/* if(typeof (this.groupArray) !== 'undefined') {
this.groupArray.push(this.fb.group({
id: [''],
legend:this.newGroup.legend
}));
}*/
}
}
submit(value) {
this.result = value
}
My html is like
<form [formGroup]="roleForm" (submit)="submit(roleForm.value)">
<h3>Add trust</h3>
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" formControlName="roleName">
</div>
<div class="form-group">
<label>roleDescription</label>
<input type="text" class="form-control" formControlName="roleDescription">
</div>
<div class="form-group">
<label>permission roles</label>
<div formArrayName="permissionModules">
<div *ngFor="let contract of roleForm.controls.permissionModules.controls;
let i=index" class="panel panel-default">
<div [formGroupName]="i">
{{contract.value.legend}}
<!-- <input type = "checkbox" formControlName="legend">
{{contract.value.legend}}-->
</div>
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
But I am unable to iterate the second level array in above case
under initGroup () function groupArray, I didn' t know what is my mistake, I searched many sites all are telling only one level iteration, I am new to angular2 ,So Please any one help me
Thanks in advance
解决方案
I solved my problem
using <FormArray>this.roleForm.controls['permissionModules']).at(k).get('group') as FormArray
synatax I am able iterate nested arrays,
This is plunk link where you can see my approach
http://plnkr.co/edit/AVqWKkUCNc1HjosOpUWf?p=preview
这篇关于如何以angular2反应形式迭代表单数组(数组中的数组)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
