Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

emitEvent is ignored in ionicv4 beta16 #16452

Closed
abhilashbr92 opened this issue Nov 26, 2018 · 4 comments · Fixed by #17175
Closed

emitEvent is ignored in ionicv4 beta16 #16452

abhilashbr92 opened this issue Nov 26, 2018 · 4 comments · Fixed by #17175
Labels
needs: reply the issue needs a response from the user

Comments

@abhilashbr92
Copy link

abhilashbr92 commented Nov 26, 2018

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

@ionitron-bot ionitron-bot bot added the triage label Nov 26, 2018
@paulstelzer paulstelzer added needs: investigation package: core @ionic/core package and removed triage labels Dec 3, 2018
@paulstelzer
Copy link
Contributor

paulstelzer commented Dec 11, 2018

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)

@paulstelzer paulstelzer added needs: reply the issue needs a response from the user and removed needs: investigation package: core @ionic/core package labels Dec 11, 2018
@abhilashbr92
Copy link
Author

abhilashbr92 commented Dec 11, 2018

@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
Copy link
Contributor

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

@paulstelzer paulstelzer added needs: reply the issue needs a response from the user and removed needs: investigation package: core @ionic/core package labels Jan 13, 2019
manucorporat added a commit that referenced this issue Jan 19, 2019
* fix(angular): add validation classes to ion-item

* fix(inputs): focus handling

fixes #17171
fixes #16052
fixes #15572
fixes #16452
fixes #17063
@ionitron-bot
Copy link

ionitron-bot bot commented Feb 18, 2019

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Feb 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
needs: reply the issue needs a response from the user
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants