How to build nested array by using angular2 Reactive forms?

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

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.

Answer 1

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

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

Answer 2

I have created the following function:

patchValue(form:any, object:any){

    var iterate = (mForm:any, mObject:any)=> {
        for (var key in mObject) {
            if (Array.isArray(mObject[key])) {
                if(mForm.value[key] == undefined || mForm.value[key] == null){
                    if(Array.isArray(mForm.value)){
                        mForm.push(new FormArray([]));
                    } else {
                        mForm.addControl(key, new FormArray([]));
                    }
                }
                iterate(mForm.controls[key], mObject[key]);
            }
            else if (typeof mObject[key] == 'string' || typeof mObject[key] == 'number' || typeof mObject[key] == 'boolean' || mObject[key] == null) {
                if(mForm.value[key] == undefined || mForm.value[key] == null){
                    if(Array.isArray(mForm.value)){
                        mForm.push(new FormControl(''));
                    } else {
                        mForm.addControl(key, new FormControl(''));
                    }
                }
            }
            else if (mObject[key] != null && typeof mObject[key] == 'object') {
                if(mForm.value[key] == undefined || mForm.value[key] == null){
                    if(Array.isArray(mForm.value)){
                        mForm.push(new FormGroup({}));
                    } else {
                        mForm.addControl(key, new FormGroup({}));
                    }
                }

                iterate(mForm.controls[key], mObject[key]);
            }
            else {
                console.log(key);
                console.log('undefined element');
            }
        }
    };

    iterate(form, object);

    form.patchValue(object);
}

Simply pass an empty form and your object. It will build your form based on the object you passed:

this.form = this.fb.array([]);
this.template = [  
   {  
      "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"
                     }
                  ]
               }
            }
         ]
      }
   }
]
this.patchValue(this.form, this.template);

If you want to build it yourself, you have to do it manually... I would recommend you this article: https://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html