title: Add FormControl accroding to the data returned from backend but got two different error in Angular app
body: <p>This is one of the page of my Angular app.</p>
  
  <p>Inside the ngOnInit method, I call the api twice to get different data I need and loop through the data by using forEach method to build reactive form, but somehow, I encountered one of two different error.</p>
  
  <p>This</p>
  
  <p><a href="https://i.stack.imgur.com/M0rgc.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>and this</p>
  
  <p><a href="https://i.stack.imgur.com/5kJSI.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>and sometime there is no error at all.</p>
  
  <p>It would be grateful if someone can tell me what's wrong with my code.</p>
  
  <p>here is part of my code</p>
  
  <p>user-manager.component.ts</p>
  
  <pre><code>export class UserManagerComponent implements OnInit {
      constructor(
      private fb: FormBuilder
    ) {}
      ngOnInit(): void {
          this.commonData.getDropdownData('menus')
          .pipe(takeWhile(() =&gt; this.alive))
          .subscribe(r =&gt; {
            if (r.status === 0) {
              this.menuForm = this.fb.group({});
              this.menuList = r.result.menus;
              this.menuList.forEach(i =&gt; {
                const control = new FormControl();
               (this.menuForm as FormGroup).setControl(i.MenuId, control);
                i.children.forEach(a =&gt; {
                  const con = new FormControl();
                  (this.menuForm as FormGroup).setControl(a.MenuId, con);
                });
              });
              this.isMenuFormReady = true;
        } else {
          this.toastrService.danger(r.message);
        }
      },
        error =&gt; {
          if (!environment.production) {
            this.menuForm = this.fb.group({});
            this.menuList = menuMock.menus;
            this.menuList.forEach(i =&gt; {
  
              const control = new FormControl();
  
              (this.menuForm as FormGroup).setControl(i.MenuId, control);
  
              i.children.forEach(a =&gt; {
                const con = new FormControl();
                (this.menuForm as FormGroup).setControl(a.MenuId, con);
              });
  
            });
            this.isMenuFormReady = true;
          }
            console.log(error);
        });
  
      this.commonData.getDropdownData('permissions')
      .pipe(takeWhile(() =&gt; this.alive))
      .subscribe(r =&gt; {
        if (r.status === 0) {
          this.permissionsForm = this.fb.group({});
          this.permissionsList = r.result;
          this.permissionsList = this.groupBy(this.permissionsList, function(item) {
            return [item.GroupId];
        });
  
        this.permissionsList.forEach(i =&gt; {
  
          const id = i[0].GroupId;
          this.permissionsForm.addControl(id, this.fb.group({}));
  
          i.forEach(a =&gt; {
            const con = new FormControl();
            (this.permissionsForm.get(id) as FormGroup).addControl(a.ActionId, con);
          });
        });
        this.isPermissionFormReady = true;
  
        } else {
          this.toastrService.danger(r.message);
        }
      },
        error =&gt; {
          if (!environment.production) {
            this.permissionsForm = this.fb.group({});
            this.permissionsList = userMock.Permission;
            this.permissionsList = this.groupBy(this.permissionsList, function(item) {
              return [item.GroupId];
          });
  
            this.permissionsList.forEach(i =&gt; {
  
              const id = i[0].GroupId;
              // console.log('id: ', id)
              this.permissionsForm.addControl(id, this.fb.group({}));
  
              i.forEach(a =&gt; {
                const con = new FormControl();
                (this.permissionsForm.get(id) as FormGroup).addControl(a.ActionId, con);
              });
            });
            this.isPermissionFormReady = true;
            // console.log(this.permissionsForm);
          }
            console.log(error);
        });
    }
      groupBy( array , f ) {
          const groups = {};
          array.forEach( function(o) {
              const group = JSON.stringify( f(o) );
              groups[group] = groups[group] || [];
              groups[group].push( o );
          });
          return Object.keys(groups).map( function( group ) {
              return groups[group];
          });
      }
  }
  </code></pre>
  
  <p>user-manager.component.html</p>
  
  <pre><code>      &lt;nb-card&gt;
  
            &lt;nb-card-header&gt;
              form1
            &lt;/nb-card-header&gt;
            &lt;nb-card-body&gt;
                &lt;form [formGroup]="permissionsForm" autocomplete="off" *ngIf="isPermissionFormReady"&gt;
              &lt;nb-card *ngFor="let item of permissionsList; let i = index;" [formGroupName]="i"&gt;
                &lt;nb-card-header&gt;
                  {{item[0].GroupName}}
                &lt;/nb-card-header&gt;
                &lt;nb-card-body class="pt-0"&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-4 my-1" *ngFor="let permission of item"&gt;
                      &lt;label&gt;
                        &lt;input type="checkbox" [formControlName]="permission.ActionId"/&gt;
                        {{permission.ActionName}}
                      &lt;/label&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/nb-card-body&gt;
              &lt;/nb-card&gt;
            &lt;/form&gt;
            &lt;/nb-card-body&gt;
  
          &lt;/nb-card&gt;
  
          &lt;nb-card&gt;
              &lt;nb-card-header&gt;
                form2
              &lt;/nb-card-header&gt;
              &lt;nb-card-body&gt;
                &lt;form [formGroup]="menuForm" autocomplete="off" *ngIf="isMenuFormReady"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-4" *ngFor="let menu of menuList" &gt;
                          &lt;nb-card&gt;
                            &lt;nb-card-header&gt;
                              &lt;label&gt;
                                &lt;input type="checkbox" id="{{menu.MenuId}}" [formControlName]="menu.MenuId" (change)="menuClick($event)"/&gt;
                                {{menu.title}}
                              &lt;/label&gt;
                            &lt;/nb-card-header&gt;
                            &lt;nb-card-body class="pt-0"&gt;
                              &lt;div class="row"&gt;
                                &lt;div class="col-12 my-1" *ngFor="let item of menu.children"&gt;
                                  &lt;label&gt;
                                    &lt;input type="checkbox" id="{{item.MenuId}}" [formControlName]="item.MenuId" (change)="menuClick($event)"/&gt;
                                    {{item.title}}
                                  &lt;/label&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                            &lt;/nb-card-body&gt;
                          &lt;/nb-card&gt;
                        &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
              &lt;/nb-card-body&gt;
            &lt;/nb-card&gt;
  </code></pre>