Kindly review this code snippet and assist me in resolving the issue.
I have set up a formArray where the label and formControlName do not match, so I have utilized mapping to synchronize them. Upon receiving a response from the API, I initialize the form and update the form values based on the grants array.
The grants, also known as userPermissions, is an array of objects where each object represents a set of permissions for the institutions.
import {
Component,
Input,
OnChanges,
OnInit,
SimpleChanges,
} from '@angular/core';
import { UserPermissionsService } from '../../../services/user-permissions.service';
import {
AbstractControl,
FormArray,
FormBuilder,
FormControl,
FormGroup,
} from '@angular/forms';
import { Grant, UserPermissionsReponse } from '../../../modals/users.model';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'web-messenger-user-permissions',
templateUrl: './user-permissions.component.html',
styleUrls: ['./user-permissions.component.scss'],
})
export class UserPermissionsComponent implements OnChanges, OnInit {
@Input() userId = '';
public permissionsForm: FormGroup;
public isEditMode = false;
public userPermissions!: Grant[];
public allActions = [
// List of actions
];
public formControlLabelMapping!: { [key: string]: string };
constructor(
private userPermissionsSvc: UserPermissionsService,
private fb: FormBuilder,
private translate: TranslateService
) {
this.permissionsForm = this.fb.group({
grants: this.fb.array([]),
});
}
ngOnInit(): void {
this.initializeFormControlLabelMapping();
}
ngOnChanges(changes: SimpleChanges): void {
if (changes['userId'].currentValue) {
console.log('user Id', this.userId);
this.getUserPermissions(this.userId);
}
}
get grantsFormArray() {
return this.permissionsForm.get('grants') as FormArray;
}
getControls(control: AbstractControl): { [key: string]: AbstractControl } {
return (control as FormGroup).controls;
}
// Methods for handling user permissions
Furthermore, the HTML code has been adjusted to accommodate the grantsFromArray and obtain the form controls with label mappings.
<form [formGroup]="permissionsForm">
<div class="p-4 border dark:border-gray-700 rounded w-full shadow-sm">
<!-- ... -->
<h3 class="font-medium text-secondary dark:text-white text-lg mb-4 flex justify-between flex-wrap">
{{'institutionGrants' | translate}}
<button class="btn btn-primary dark:btn-accent btn-sm text-white" (click)="addNewPermissionsSet()">
{{'addAdditionalInstitutionGrants' | translate}}
</button>
</h3>
<h4 class="flex justify-between mb-3 text-base">
<span>{{'institution(s)' | translate}}:</span>
<span *ngFor="let institute of userPermissions">
<a class="link text-primary dark:text-accent font-medium">Intelegencia Okta</a>
</span>
</h4>
<div *ngFor="let grantControl of grantsFormArray.controls; let i = index">
<ng-container [formGroupName]="i">
<div *ngFor="let action of getControls(grantControl) | keyvalue">
{{action.key}}
<label class="cursor-pointer label mb-1 rounded px-3 border dark:border-gray-700">
<span>{{ formControlLabelMapping[action.key] }}</span>
<!-- Display 'Yes' or 'No' based on value --
</label>
</div>
</ng-container>
</div>
<!-- ... -->
</div>
</form>