json - 如何使用 angular2 react 形式构建嵌套数组？

Question

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 之类的

[  
   {  
      "name":"aaa",
      "description":"das",
      "permission":[  
         {  
            "permission_id":1,
            "relation":2
         }
      ]
   }
]

如何使用响应式(Reactive)表单为此案例构建表单组

我尝试过这样

组件.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 。

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

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

Answer 1

我会创建一些属性，例如permissionGroups并展平您的数据

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如下:

<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>

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

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 Example中的代码进行操作

另请参阅

• https://netbasal.com/handling-multiple-checkboxes-in-angular-forms-57eb8e846d21