如何使用angular2 Reactive表单构建嵌套数组? [英] How to build nested array by using angular2 Reactive forms?

查看：25
本文介绍了如何使用angular2 Reactive表单构建嵌套数组?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个像[{权限角色模块":{身份证":1，"legend":"businessModule",团体":[{权限角色组":{身份证":1，允许":{"controleType":"ff",身份证":2，"key":"创建业务"},角色":[{身份证":1，姓名":自己"},{身份证":2，姓名":其他"}]}},{权限角色组":{身份证":1，允许":{"controleType":"ff",身份证":2，"key":"编辑业务"},角色":[{身份证":1，姓名":自己"},{身份证":2，姓名":其他"}]}}]}},{权限角色模块":{身份证":2，"legend":"恐慌模块",团体":[{权限角色组":{身份证":1，允许":{"controleType":"ff",身份证":2，"key":"制造恐慌"},角色":[{身份证":1，姓名":自己"},{身份证":2，姓名":其他"}]}},{权限角色组":{身份证":1，允许":{"controleType":"ff",身份证":2，"key":"编辑恐慌"},角色":[{身份证":1，姓名":自己"},{身份证":2，姓名":其他"}]}}]}}]

我的观点就像附件

当我点击提交按钮时，我期待像 json 一样

<预><代码>[{"name":"aaa","描述":"das",允许":[{permission_id":1，关系":2}]}]

如何使用响应式表单为这种情况构建表单组

我是这样试的

component.ts

roleForm: FormGroup;表单字段:任何；验证表单(){this.formField['rolename'] = new FormControl('', Validators.compose([Validators.required]))this.formField['roledescription'] = new FormControl('', Validators.compose([Validators.required]))this.form_objects.forEach(element => {如果(元素.组){element.group.forEach(PermissionRoleGroup => {this.formField[PermissionRoleGroup.permission.key] = new FormControl({value:''}, Validators.compose([Validators.required]))如果(PermissionRoleGroup.roles){PermissionRoleGroup.roles.forEach(role => {this.formField[role.key] = new FormControl('', Validators.compose([Validators.required]))});}})}});this.roleForm = this.fb.group(this.formField);}

html

 
<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"><输入类型=复选框"[id]="permissionRoleGroup.permission.key"[formControlName]="permissionRoleGroup.permission.key"[value] = "permissionRoleGroup.permission.value">{{permissionRoleGroup.permission.label }}-{{permissionRoleGroup.permission.ischecked}}</td><td width="15%" *ngFor="let role of permissionRoleGroup.roles"><label class="font-light"><输入类型=复选框"[价值] = "角色.价值"[formControlName]="role.key">{{role.label}}-{{role.ischecked}}</td></tr>

有了这个，我可以构建表单，在提交过程中，我的表单没有创建 json .

这是 plunker 链接 https://plnkr.co/edit/h2VuBw4uITi6czn98ViS?p=preview

由于我是 angular-2 的初学者，所以请帮助我.

解决方案

我会创建一些像 permissionGroups 这样的属性并扁平化你的数据

permissionGroups: any[];...this.permissionGroups = this.form_objects.reduce((acc, permission) => [...acc, ...permission.group], []);

然后我会像这样构建 formGroup:

const 权限 = this.permissionGroups.map(group => {返回 this.fb.group({[group.permission.key]:假，角色:this.fb.array(group.roles.map(role => this.fb.control(false)))});});this.roleForm = this.fb.group({角色名称:[''，Validators.required]，roleDescription: ['', Validators.required],权限:this.fb.array(权限)});

并按如下方式准备html:

<div class="form-group"><label>名称</label><input type="text" class="form-control" formControlName="roleName">

<div class="form-group"><label>描述</label><textarea rows="4" class="form-control" formControlName="roleDescription"></textarea>

<div formArrayName="权限"><div class="form-row" *ngFor="let permission of roleForm.controls.permissions.controls; let i = index; "><table [formArrayName]="i"><tr><表格><tr><td><label class="font-light"><input type="checkbox" [formControlName]="permissionGroups[i].permission.key">{{ permissionGroups[i].permission.key }}</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 }}</td></tr></tr>

<button type="submit">提交</button></表单>

当您提交表单时，您需要将表单值转换为您想要的结果，如下所示:

提交(值){this.result = Object.assign({}, value, {权限:value.permissions.reduce((acc, permission, idx) => {返回权限[this.permissionGroups[idx].permission.key] ?[...acc，{permission_id: this.permissionGroups[idx].permission.id,关系:permission.roles.reduce((rolesAcc, role, roleIdx) => {回归角色?[...rolesAcc, this.permissionGroups[idx].roles[roleIdx].id] : rolesAcc;}, [])}] : ACC}, [])});}

你会看到如下输出:

<代码>{"角色名称": "","角色描述": "",权限":[{"permission_id": 2,关系": [1]},{"permission_id": 2,关系": [1、2]}]}

您可以使用 Plunker 示例

另见

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"
                     }
                  ]
               }
            }
         ]
      }
   }
]

and my view is like shown in attatchment

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

I tried like this

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>

with this I am able to build form , during submission, my form is not creating json .

This is plunker link https://plnkr.co/edit/h2VuBw4uITi6czn98ViS?p=preview

As i am beginner in angular-2 so please help me out.

解决方案

I would create some property like permissionGroups and flatten your data

permissionGroups: any[];
...
this.permissionGroups = this.form_objects
   .reduce((acc, permission) => [...acc, ...permission.group], []);

then i would build formGroup like this:

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)
});

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
      }, [])
  });
}

and you will see the output like:

{
  "roleName": "",
  "roleDescription": "",
  "permissions": [
    {
      "permission_id": 2,
      "relation": [
        1
      ]
    },
    {
      "permission_id": 2,
      "relation": [
        1,
        2
      ]
    }
  ]
}

You can play with the code in Plunker Example

See also

这篇关于如何使用angular2 Reactive表单构建嵌套数组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆