如何通过使用angular2反应形式来构建嵌套数组?
问题描述：
I have an array like
[
{
"PermissionRoleModule":{
"id":1,
"legend":"businessModule",
"group":[
{
"PermissionRoleGroup":{
"id":1,
"permission":{
"controleType":"ff",
"id":2,
"key":"create Business"
},
"roles":[
{
"id":1,
"name":"self"
},
{
"id":2,
"name":"other"
}
]
}
},
{
"PermissionRoleGroup":{
"id":1,
"permission":{
"controleType":"ff",
"id":2,
"key":"edit business"
},
"roles":[
{
"id":1,
"name":"self"
},
{
"id":2,
"name":"other"
}
]
}
}
]
}
},
{
"PermissionRoleModule":{
"id":2,
"legend":"PanicModule",
"group":[
{
"PermissionRoleGroup":{
"id":1,
"permission":{
"controleType":"ff",
"id":2,
"key":"create panic"
},
"roles":[
{
"id":1,
"name":"self"
},
{
"id":2,
"name":"other"
}
]
}
},
{
"PermissionRoleGroup":{
"id":1,
"permission":{
"controleType":"ff",
"id":2,
"key":"edit panic"
},
"roles":[
{
"id":1,
"name":"self"
},
{
"id":2,
"name":"other"
}
]
}
}
]
}
}
]
和我的观点就像附件
当我单击提交按钮时，我期望像json
when I click submit button I am expecting json like
[
{
"name":"aaa",
"description":"das",
"permission":[
{
"permission_id":1,
"relation":2
}
]
}
]
在这种情况下，如何使用反应式表单构建表单组
How to build form group for this case using reactive forms
我尝试过这样
component.ts
roleForm: FormGroup;
formField: any;
validateForm() {
this.formField['rolename'] = new FormControl('', Validators.compose([Validators.required]))
this.formField['roledescription'] = new FormControl('', Validators.compose([Validators.required]))
this.form_objects.forEach(element => {
if (element.group) {
element.group.forEach(PermissionRoleGroup => {
this.formField[PermissionRoleGroup.permission.key] = new FormControl({value:''}, Validators.compose([Validators.required]))
if (PermissionRoleGroup.roles) {
PermissionRoleGroup.roles.forEach(role => {
this.formField[role.key] = new FormControl('', Validators.compose([Validators.required]))
});
}
})
}
});
this.roleForm = this.fb.group(this.formField);
}
html
<div class="form-row" *ngFor="let element of form_objects; let i = index; ">
<table class="table table-bordered">
<tr *ngFor="let permissionRoleGroup of element.group;let j= index;">
<table class="table table-bordered" style="margin-bottom: 0px;">
<td width="40%">
<label class="font-light">
<input type="checkbox"
[id]="permissionRoleGroup.permission.key"
[formControlName]="permissionRoleGroup.permission.key"
[value] = "permissionRoleGroup.permission.value">
{{permissionRoleGroup.permission.label }}-{{permissionRoleGroup.permission.ischecked}}
</label>
</td>
<td width="15%" *ngFor="let role of permissionRoleGroup.roles">
<label class="font-light">
<input type="checkbox"
[value] = "role.value"
[formControlName]=" role.key">
{{role.label}}-{{role.ischecked}}
</label>
</td>
</table>
</tr>
</table>
</div>
以此我可以构建表单，在提交过程中，我的表单没有创建json.
with this I am able to build form , during submission, my form is not creating json .
这是插件链接 https://plnkr.co/edit/h2VuBw4uITi6czn98ViS?p=preview
由于我是angular-2的初学者，所以请帮助我.
As i am beginner in angular-2 so please help me out.
答
我会创建诸如permissionGroups之类的属性并展平数据
I would create some property like permissionGroups and flatten your data
permissionGroups: any[];
...
this.permissionGroups = this.form_objects
.reduce((acc, permission) => [...acc, ...permission.group], []);
然后我将像这样构建formGroup:
const permissions = this.permissionGroups.map(group => {
return this.fb.group({
[group.permission.key]: false,
roles: this.fb.array(group.roles.map(role => this.fb.control(false)))
});
});
this.roleForm = this.fb.group({
roleName: ['', Validators.required],
roleDescription: ['', Validators.required],
permissions: this.fb.array(permissions)
});
并按如下方式准备html:
and prepare html as follows:
<form [formGroup]="roleForm" (submit)="submit(roleForm.value)">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" formControlName="roleName">
</div>
<div class="form-group">
<label>Description</label>
<textarea rows="4" class="form-control" formControlName="roleDescription"></textarea>
</div>
<div formArrayName="permissions">
<div class="form-row" *ngFor="let permission of roleForm.controls.permissions.controls; let i = index; ">
<table [formArrayName]="i">
<tr>
<table>
<tr>
<td>
<label class="font-light">
<input type="checkbox" [formControlName]="permissionGroups[i].permission.key">
{{ permissionGroups[i].permission.key }}
</label>
</td>
<td *ngFor="let role of permission.controls.roles.controls; let j = index;">
<label class="font-light" formArrayName="roles">
<input type="checkbox" [formControlName]="j">
{{ permissionGroups[i].roles[j].name }}
</label>
</td>
</tr>
</table>
</tr>
</table>
</div>
</div>
<button type="submit">Submit</button>
</form>
提交表单时，需要将表单值转换为所需的结果，如下所示:
And when you will submit the form you need to convert form value to your desired result something like this:
submit(value) {
this.result = Object.assign({}, value, {
permissions: value.permissions
.reduce((acc, permission, idx) => {
return permission[this.permissionGroups[idx].permission.key] ?
[
...acc,
{
permission_id: this.permissionGroups[idx].permission.id,
relation: permission.roles
.reduce((rolesAcc, role, roleIdx) => {
return role ? [...rolesAcc, this.permissionGroups[idx].roles[roleIdx].id] : rolesAcc;
}, [])
}
] : acc
}, [])
});
}
，您将看到如下输出:
{
"roleName": "",
"roleDescription": "",
"permissions": [
{
"permission_id": 2,
"relation": [
1
]
},
{
"permission_id": 2,
"relation": [
1,
2
]
}
]
}
您可以使用 Plunker示例 中的代码>
You can play with the code in Plunker Example
另请参见