javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 01:52:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(angular): make sure angular form control onChange is fired when needed (#16126)

Browse Source 
* Make sure, that angular form's onChange is not fired, when writeValue is called

* Update angular/src/directives/control-value-accessors/select-value-accessor.ts

Co-Authored-By: mmlleevvyy <levy@codeandmore.pl>

* set muteOnChange to false by default
This commit is contained in:
Mark Levy
2018-10-30 21:43:37 +01:00
committed by Manu MA
parent e9579d597f
commit d5f2e6fdd8
5 changed files with 61 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
angular/src/directives/control-value-accessors/boolean-value-accessor.ts
View File

@ -24,14 +24,25 @@ export class BooleanValueAccessor implements ControlValueAccessor {
onChange: (value: any) => void;
onTouched: () => void;
/**
* Whether onChange should be mutted (not be fired). Will be true only when writeValue was called, which
* means that value changed inside angular form (e.g. calling setValue on a control).
*/
private muteOnChange = false;
writeValue(value: any) {
this.muteOnChange = true;
this.element.nativeElement.checked = value;
setIonicClasses(this.element);
}
@HostListener('ionChange', ['$event.target.checked'])
_handleIonChange(value: any) {
this.onChange(value);
if (!this.muteOnChange) {
this.onChange(value);
}
this.muteOnChange = false;
requestAnimationFrame(() => {
setIonicClasses(this.element);

14
angular/src/directives/control-value-accessors/numeric-value-accesssor.ts
View File

@ -24,7 +24,15 @@ export class NumericValueAccessor implements ControlValueAccessor {
onChange: (value: any) => void;
onTouched: () => void;
/**
* Whether onChange should be mutted (not be fired). Will be true only when writeValue was called, which
* means that value changed inside angular form (e.g. calling setValue on a control).
*/
private muteOnChange = false;
writeValue(value: any) {
this.muteOnChange = true;
// The value needs to be normalized for IE9, otherwise it is set to 'null' when null
// Probably not an issue for us, but it doesn't really cost anything either
this.element.nativeElement.value = value == null ? '' : value;
@ -33,7 +41,11 @@ export class NumericValueAccessor implements ControlValueAccessor {
@HostListener('ionChange', ['$event.target.value'])
_handleInputEvent(value: any) {
this.onChange(value);
if (!this.muteOnChange) {
this.onChange(value);
}
this.muteOnChange = false;
requestAnimationFrame(() => {
setIonicClasses(this.element);

13
angular/src/directives/control-value-accessors/radio-value-accessor.ts
View File

@ -25,7 +25,14 @@ export class RadioValueAccessor implements ControlValueAccessor {
this.onTouched = () => {/**/};
}
/**
* Whether onChange should be mutted (not be fired). Will be true only when writeValue was called, which
* means that value changed inside angular form (e.g. calling setValue on a control).
*/
private muteOnChange = false;
writeValue(value: any) {
this.muteOnChange = true;
this.element.nativeElement.checked = this.value = value;
requestAnimationFrame(() => {
@ -35,7 +42,11 @@ export class RadioValueAccessor implements ControlValueAccessor {
@HostListener('ionSelect', ['$event.target.checked'])
_handleIonSelect(value: any) {
this.onChange(value);
if (!this.muteOnChange) {
this.onChange(value);
}
this.muteOnChange = false;
requestAnimationFrame(() => {
setIonicClasses(this.element);

13
angular/src/directives/control-value-accessors/select-value-accessor.ts
View File

@ -24,7 +24,14 @@ export class SelectValueAccessor implements ControlValueAccessor {
onChange: (value: any) => void;
onTouched: () => void;
/**
* Whether onChange should be mutted (not be fired). Will be true only when writeValue was called, which
* means that value changed inside angular form (e.g. calling setValue on a control).
*/
private muteOnChange = false;
writeValue(value: any) {
this.muteOnChange = true;
this.element.nativeElement.value = value;
requestAnimationFrame(() => {
@ -34,7 +41,11 @@ export class SelectValueAccessor implements ControlValueAccessor {
@HostListener('ionChange', ['$event.target.value'])
_handleChangeEvent(value: any) {
this.onChange(value);
if (!this.muteOnChange) {
this.onChange(value);
}
this.muteOnChange = false;
requestAnimationFrame(() => {
setIonicClasses(this.element);

13
angular/src/directives/control-value-accessors/text-value-accessor.ts
View File

@ -24,7 +24,14 @@ export class TextValueAccessor implements ControlValueAccessor {
onChange: (value: any) => void;
onTouched: () => void;
/**
* Whether onChange should be mutted (not be fired). Will be true only when writeValue was called, which
* means that value changed inside angular form (e.g. calling setValue on a control).
*/
private muteOnChange = false;
writeValue(value: any) {
this.muteOnChange = true;
this.element.nativeElement.value = value;
requestAnimationFrame(() => {
@ -34,7 +41,11 @@ export class TextValueAccessor implements ControlValueAccessor {
@HostListener('ionChange', ['$event.target.value'])
_handleInputEvent(value: any) {
this.onChange(value);
if (!this.muteOnChange) {
this.onChange(value);
}
this.muteOnChange = false;
requestAnimationFrame(() => {
setIonicClasses(this.element);