Encountering a situation where the user can open a mat-select and choose an option from the dropdown, triggering the display of a hidden form for filling. Initially, this worked fine with a static template. But now, we have transitioned to linking the mat-select and corresponding templates to options within Angular's formArray.
Currently facing two main issues:
- All
mat-selectelements in the generated forms are listening to the same event - triggering changes in onemat-selectimpacts others. - Upon selection, all generated forms display the template linked to the first selection (index 0 in the
formArray).
No syntax errors exist at present. The root of the problem seems to be related to a global variable (isPremiumAmountSelected) used to determine visibility of the forms. I prefer not to resort to splitting my component using @Input and @Output, so seeking a solution building upon the provided code.
isPremiumAmountSelected: boolean = false;
FixedProductPrice: Boolean = undefined;
OneFactorPricingCarValue: Boolean = undefined;
MultiFactorPricingCarValueCarModel: Boolean = undefined;
ToggledPremiumAmountTypeDropDownOptions(data){
this.isPremiumAmountSelected = true;
if(Object.is(data.value, 1)){
this.FixedProductPrice = true;
this.OneFactorPricingCarValue = false;
this.MultiFactorPricingCarValueCarModel = false;
}if(Object.is(data.value, 2)){
this.OneFactorPricingCarValue = true;
this.FixedProductPrice = false;
this.MultiFactorPricingCarValueCarModel = false;
}if(Object.is(data.value, 3)){
this.MultiFactorPricingCarValueCarModel = true;
this.FixedProductPrice = false;
this.OneFactorPricingCarValue = false;
}
}UPDATE
Managed to resolve the issue shortly after posting the query. Simplified approach similar to @Eliseo's suggestion below.
Step one: Remove TS method and global variable
Delete
ToggledPremiumAmountTypeDropDownOptions()isPremiumAmountSelected variable. Retain the other three variables.
Step two: Adjust ngIf logic in the template
To address multiple listeners reacting to the same event, access the selected option value within every *ngIf iteration instead. Eliminate the container for isPremiumAmountSelected and modify the conditional logic for each template accordingly. Also, remove any methods on the mat-select element.