My array is dynamic and has an onChange method in the select option. The issue arises when I add a new array and select the new option, as it causes the first array to reset. Here's a snippet of my array structure:
<ng-container formGroupName="envelopeRequest">
<button (click)='initDocument()'>Add Document</button>
<ng-container formArrayName="documents">
<ng-container
*ngFor="let control of documents.controls; let comIndex=index"
>
<ng-container [formGroupName]="comIndex">
<div class="row justify-content-start mb-3">
<div class="col-md-1">
{{comIndex}}
<input
type="hidden"
id="fname"
name="fname"
formControlName="documentId"
/>
<label for="formFile" class="col-form-label">File:</label>
</div>
<div class="col-md-6">
<input
class="form-control"
type="file"
id="file"
name="file"
formControlName="name"
/>
</div>
</div>
<ng-container formArrayName="documentFields">
<ng-container
*ngFor="let skillIndex of documentFieldsIndexes(comIndex);"
>
<div class="row mb-3">
<label class="col-sm-1 col-form-label">Category:</label>
<div class="col-md-2">
<ng-container [formGroupName]="skillIndex">
<select id="" class="form-select" formControlName="value" (change)="changeCategoryList($event)">
<option selected>Select</option>
<option *ngFor="let c of categoryList">
{{c.name}}
</option>
</select>
</ng-container>
</div>
<label class="col-auto col-form-label">Sub-Category:</label>
<div class="col-md-2">
<ng-container [formGroupName]="skillIndex + 1">
<select id="" class="form-select" formControlName="value" (change)="changeSubCategoryList($event)">
<option selected>Select</option>
<option *ngFor="let s of subCategoryList">{{s.name}}</option>
</select>
</ng-container>
</div>
<label class="col-auto col-form-label">List:</label>
<div class="col-md-2">
<ng-container [formGroupName]="skillIndex + 2">
<select id="" class="form-select" formControlName="value">
<option selected>Select</option>
<option *ngFor="let name of typeList">{{name}}</option>
</select>
</ng-container>
</div>
</div>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
I suspect that both select options are using the same method, leading to this issue. Below is a section of my TypeScript code showcasing the methods:
changeCategoryList(category: any) {
this.subCategoryList = this.categoryList.find(
(cat: any) => cat.name == category.target.value
).subCategoryList;
}
changeSubCategoryList(subList: any) {
this.typeList = this.categoryList
.find((cat: any) => cat.name == this.selectedCategoryList)
.subCategoryList.find(
(stat: any) => stat.name == subList.target.value
).typeList;
}
Lastly, I'm wondering if it's possible to have an index on a method. For further reference and viewing the full code, please check out the link to the StackBlitz below: