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 12 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 12 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