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).
ngModelChange
setValue()
<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>
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); } }); }
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()
NgModelChange
valueChange
emitEvent
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>