This specific page is a part of my Angular application.
Within the ngOnInit method, I make two API calls to retrieve necessary data and iterate through it using forEach method to construct a reactive form. However, I am facing one of two different errors along the way.
One error looks like this: see image here
While the other error resembles this: check out image here
Sometimes, there are no errors at all.
I would appreciate any insights on what might be causing issues in my code.
Below is a snippet from my code:
user-manager.component.ts
export class UserManagerComponent implements OnInit {
constructor(
private fb: FormBuilder
) {}
ngOnInit(): void {
this.commonData.getDropdownData('menus')
.pipe(takeWhile(() => this.alive))
.subscribe(r => {
if (r.status === 0) {
this.menuForm = this.fb.group({});
this.menuList = r.result.menus;
this.menuList.forEach(i => {
const control = new FormControl();
(this.menuForm as FormGroup).setControl(i.MenuId, control);
i.children.forEach(a => {
const con = new FormControl();
(this.menuForm as FormGroup).setControl(a.MenuId, con);
});
});
this.isMenuFormReady = true;
} else {
this.toastrService.danger(r.message);
}
},
error => {
if (!environment.production) {
this.menuForm = this.fb.group({});
this.menuList = menuMock.menus;
this.menuList.forEach(i => {
const control = new FormControl();
(this.menuForm as FormGroup).setControl(i.MenuId, control);
i.children.forEach(a => {
const con = new FormControl();
(this.menuForm as FormGroup).setControl(a.MenuId, con);
});
});
this.isMenuFormReady = true;
}
console.log(error);
});
this.commonData.getDropdownData('permissions')
.pipe(takeWhile(() => this.alive))
.subscribe(r => {
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 => {
const id = i[0].GroupId;
this.permissionsForm.addControl(id, this.fb.group({}));
i.forEach(a => {
const con = new FormControl();
(this.permissionsForm.get(id) as FormGroup).addControl(a.ActionId, con);
});
});
this.isPermissionFormReady = true;
} else {
this.toastrService.danger(r.message);
}
},
error => {
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 => {
const id = i[0].GroupId;
// console.log('id: ', id)
this.permissionsForm.addControl(id, this.fb.group({}));
i.forEach(a => {
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];
});
}
}
user-manager.component.html
<nb-card>
<nb-card-header>
Form 1
</nb-card-header>
<nb-card-body>
<form [formGroup]="permissionsForm" autocomplete="off" *ngIf="isPermissionFormReady">
<nb-card *ngFor="let item of permissionsList; let i = index;" [formGroupName]="i">
<nb-card-header>
{{item[0].GroupName}}
</nb-card-header>
<nb-card-body class="pt-0">
<div class="row">
<div class="col-4 my-1" *ngFor="let permission of item">
<label>
<input type="checkbox" [formControlName]="permission.ActionId"/>
{{permission.ActionName}}
</label>
</div>
</div>
</nb-card-body>
</nb-card>
</form>
</nb-card-body>
</nb-card>
<nb-card>
<nb-card-header>
Form 2
</nb-card-header>
<nb-card-body>
<form [formGroup]="menuForm" autocomplete="off" *ngIf="isMenuFormReady">
<div class="row">
<div class="col-4" *ngFor="let menu of menuList" >
<nb-card>
<nb-card-header>
<label>
<input type="checkbox" id="{{menu.MenuId}}" [formControlName]="menu.MenuId" (change)="menuClick($event)"/>
{{menu.title}}
</label>
</nb-card-header>
<nb-card-body class="pt-0">
<div class="row">
<div class="col-12 my-1" *ngFor="let item of menu.children">
<label>
<input type="checkbox" id="{{item.MenuId}}" [formControlName]="item.MenuId" (change)="menuClick($event)"/>
{{item.title}}
</label>
</div>
</div>
</nb-card-body>
</nb-card>
</div>
</div>
</form>
</nb-card-body>
</nb-card>