Inaam Husain Staff asked 1 month ago
How can we avoid the event to be trigger on ngModelChange event while setValue() is called?
My condition is like on the value change from dropdown selection I am showing confirmation popup.
– on confirm, I want to set the new value which was changed,
– on cancel, I want to reset the old value (But on cancel popup appearing again n again).
*.component.html
<mat-select id='productID' formControlName='productID' (ngModelChange)='setNewProduct($event)' required>
<mat-option *ngFor="let product of products" [value]="product.ID">
{{product.Name}}
</mat-option>
</mat-select>
*.component.ts
public setNewProduct(ID: string) {
const oldProductID: string = this.productForm.get('productID').value;
const newProduct: Address = this.products.find((product: Product) => product.ID === ID);
this.onConfirmation().then((save: boolean) => {
if (save) {
this.productForm.get('productID').setValue(newProduct.ID);
// some more functionality
} else {
this.productForm.get('productID').setValue(oldProductID);
}
});
}
1 Answers
Rehmaanali Staff answered 1 month ago
Instade of NgModelChange you can use the valueChange then you can handle whether to emit event or not on value change by passing emitEvent in setValue()
if (save) {
this.workOrderForm.get('productID').setValue(newProduct.ID);
// some more functionality
} else {
this.workOrderForm.get('productID').setValue(oldProductID, {emitEvent: false});
}
and in HTML
<mat-select formControlName='productID' (valueChange)='setNewProduct($event)'>
...
</mat-select>