In my current project using Angular, I am tasked with setting up configuration using 4 specific fields:
- Department Name (select option)
- Service Name (select option)
- Status (text input)
- Level (text input).
I need to be able to add multiple sets of these fields and create a JSON structure.
- The values for 'Department Name' and 'Service Name' are retrieved through API calls.
- The options for 'Service Name' depend on the selected 'Department Name'.
Although I have successfully implemented the dynamic addition of fields, I encounter an issue where selecting a Department Name causes the corresponding Service Name to overwrite all previously selected 'Service Name' fields.
Below is a snippet from my component.html file:
//mapFormGroup returns FormArray for given set of fields
<div *ngFor="let map of mapFormGroup.controls; let i = index;">
<div [formGroupName]="i" class="row">
<label>Department Name</label>
// getServices fetches all services for selected department
<select class="form-control" formControlName="deptId" type="text" (change)="getServices($event.target.value)">
// deptList contains list of all departments
<option *ngFor="let dept of deptList" [value]="dept.id">{{dept.name}}</option>
</select>
<label>Service Name</label>
<select class="form-control" formControlName="serviceName" type="text">
// serviceList contains list of all services for given department
<option *ngFor="let service of serviceList" [value]="service.wfName">{{service.description}}</option>
</select>
</div>
</div>
I need to ensure that each Department corresponds correctly to its respective Service Name field without any overwriting occurring. Please assist in resolving this issue.