Currently, I am facing an issue with my 2 dropdown lists. I am binding product data to them. In the first dropdown, I have product codes and in the second dropdown, I have product names. The goal is that when a user selects a product code from the first dropdown, the second dropdown should automatically select the corresponding product name. Everything works fine with the first dropdown. However, when I try to implement the same logic for the second dropdown, I encounter an error.
Error: Maximum call stack size exceeded.
<div class="col-md-9">
<select id="Code" class="form-control" placeholder="Code"
(ngModelChange)="onCodeChange()" formControlName="sku" required>
<option [value]="''">Select Code</option>
<option [value]="product.sku"
*ngFor="let product of productData">
{{product.sku}}
</option>
</select>
</div>
<div class="col-md-9">
<select id="name" class="form-control" placeholder="Name"
(ngModelChange)="onProductChange()" formControlName="productName" required>
<option [value]="''">Select Name</option>
<option [value]="product.productName"
*ngFor="let product of productData">
{{product.productName}}
</option>
</select>
</div>
onCodeChange(): void {
const stock = (this.sharedService.where(this.productData, 'sku', this.stockForm.controls.sku.value) || {}) as any;
this.stockForm.controls.productName.reset( stock.productName);
}
onProductChange(): void {
const stock = (this.sharedService.where(this.productData, 'productName', this.stockForm.controls.productName.value) || {}) as any;
this.stockForm.controls.sku.reset( stock.sku);
}
The 'productData' variable holds information related to products. Here, the sku represents the product code.