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.