emitEvent is ignored in ionicv4 beta16

[abhilashbr92]

Hello,

I have an app which was working fine in Ionic4 beta 11. But after updating the app to beta16 i am facing weird value changes issue.

I have two Form controls Price and Total, I have subscribed the value changes for both the inputs. When I change the value in total text box, i should reset the value price field. After reset I dont want the value changes of first price to be fired so I have I applied emitEvent:false during the reset event.But the value changes of Price is fired.

I get this issue if i use Ionic-Inputs in beta16, if i change the textboxes to HTML5 inputs then it is working as expected.

I couldn't make a stackblitz demo but I have made a video of the app.In this video you will see the valuechanges of price formcontrol is fired.

https://www.useloom.com/share/0b89483a00a44568addc87fd3770fa09

I replaced the ion-inputs with html5 inputs and it is working fine. Here is the video regarding it.
https://www.useloom.com/share/21fa5339e44d4c28a40cab96dd5e87f3

Below is the template:

<ion-content padding>
  <ion-card>

    <ion-item>
      <ion-label>Price :</ion-label>
      <ion-input type="number" [formControl]="TotalsGroup.controls['Price']"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Discount :</ion-label>
      <ion-input type="number" [formControl]="TotalsGroup.controls['Discount']"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>Total :</ion-label>
      <ion-input type="number" [formControl]="TotalsGroup.controls['Total']"></ion-input>
    </ion-item>

  </ion-card>
</ion-content>

The component code is here:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  TotalsGroup: FormGroup;
  constructor(public fb: FormBuilder) {
    this.TotalsGroup = this.fb.group({
      'Price': [0, Validators.required],
      'Discount': [0, Validators.required],
      'Total': [0, Validators.required],
    });
    this.SubscribeFormGroup();
  }

  SubscribeFormGroup() {
    this.TotalsGroup.controls['Price'].valueChanges.subscribe((val: any) => {
      if (!this.TotalsGroup.controls['Price'].pristine && !this.TotalsGroup.controls['Price'].disabled) {
        console.log('price field value changes fired');
        this.CalculateOverAllTotal();
      }
    });
    this.TotalsGroup.controls['Discount'].valueChanges.subscribe((val: any) => {
      if (!this.TotalsGroup.controls['Discount'].pristine && !this.TotalsGroup.controls['Discount'].disabled) {
        console.log('disc field value changes fired');
        this.CalculateOverAllTotal();
      }
    });
    this.TotalsGroup.controls['Total'].valueChanges.subscribe((val: any) => {
      if (!this.TotalsGroup.controls['Total'].pristine && !this.TotalsGroup.controls['Total'].disabled) {
        console.log('total field value changes fired');
        this.CalculatePriceBasedOnDiscount();
      }
    });
  }

  CalculateOverAllTotal() {
    const TotalData: any = this.TotalsGroup.getRawValue();
    const FinalTotal: any = this.GetLineTotal(TotalData.Price, TotalData.Discount);
    this.TotalsGroup.controls['Total'].setValue(FinalTotal, { emitEvent: false });
  }

  GetLineTotal(Price: number, Discount: number) {
    if (Price == null) {
      Price = 0;
    }
    if (Discount == null) {
      Discount = 0;
    }
    const FinalTotal: number = Price - Discount;
    return FinalTotal;
  }

  CalculatePriceBasedOnDiscount() {
    const TotalData: any = this.TotalsGroup.getRawValue();
    const Price: any = this.ReverseCalculationBasedOnOverAllTotal(TotalData.Total, TotalData.Discount);
    this.TotalsGroup.controls['Price'].reset(Price, { emitEvent: false });
  }

  ReverseCalculationBasedOnOverAllTotal(Total: number, Discount: any) {
    if (Total == null) {
      Total = 0;
    }
    if (Discount == null) {
      Discount = 0;
    }
    return Total + Discount;
  }
}

Can somebody please help me out?

Thank you
Abhilash

[paulstelzer]

Thanks for your issue! Had you checked if this issue also happens on Angular only?

btw, you can simplify your code by wrapping the items inside a <form [formGroup]="TotalsGroup"> and then you can use formControlName="Price"

PS: It's a better practice to use lower Camel Case https://en.wikipedia.org/wiki/Camel_case (totalsGroup instead of TotalsGroup)

[abhilashbr92]

@paulstelzer Yes, I made a stackblitz demo with only Angular.And it works perfectly. Here is the demo - https://stackblitz.com/edit/angular-bktbyr?file=src%2Fapp%2Fapp.component.ts
In the demo you can see that the valuechanges is not fired after formcontrol reset event. I get Issue if I use Ionic inputs.

[paulstelzer]

Maybe this issue could be solved with #17043 . Could you check after rc.2 release if this problem is solved, too?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.