How to not trigger ngModelChange event on setValue in angular 10 reactive form

💬 Tech Talks › Category: Angular 10 › How to not trigger ngModelChange event on setValue in angular 10 reactive form
0 Vote Up Vote Down
Inaam Husain Staff asked 9 months 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);
    }
  });
}
Question Tags: , , ,
1 Answers
1 Vote Up Vote Down
Rehmaanali Staff answered 9 months 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>
Signup to Post Answer