From fab8b604a54698a6d29d5a7150e653a21c80436a Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Wed, 31 Oct 2018 19:19:13 +0100 Subject: [PATCH] fix(angular): fix ngModel accessor --- .../boolean-value-accessor.ts | 15 ++++----------- .../numeric-value-accesssor.ts | 16 ++++------------ .../radio-value-accessor.ts | 15 ++++----------- .../select-value-accessor.ts | 15 ++++----------- .../text-value-accessor.ts | 15 ++++----------- 5 files changed, 20 insertions(+), 56 deletions(-) diff --git a/angular/src/directives/control-value-accessors/boolean-value-accessor.ts b/angular/src/directives/control-value-accessors/boolean-value-accessor.ts index f9e0cf2248..bed2e03b3b 100644 --- a/angular/src/directives/control-value-accessors/boolean-value-accessor.ts +++ b/angular/src/directives/control-value-accessors/boolean-value-accessor.ts @@ -23,27 +23,20 @@ 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; + private lastValue: any; writeValue(value: any) { - this.muteOnChange = true; - this.element.nativeElement.checked = value; + this.element.nativeElement.checked = this.lastValue = value; setIonicClasses(this.element); } @HostListener('ionChange', ['$event.target.checked']) _handleIonChange(value: any) { - if (!this.muteOnChange) { + if (value !== this.lastValue) { + this.lastValue = value; this.onChange(value); } - this.muteOnChange = false; - requestAnimationFrame(() => { setIonicClasses(this.element); }); diff --git a/angular/src/directives/control-value-accessors/numeric-value-accesssor.ts b/angular/src/directives/control-value-accessors/numeric-value-accesssor.ts index 416d784381..c389e5267b 100644 --- a/angular/src/directives/control-value-accessors/numeric-value-accesssor.ts +++ b/angular/src/directives/control-value-accessors/numeric-value-accesssor.ts @@ -23,29 +23,21 @@ 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; + private lastValue: any; 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; + this.element.nativeElement.value = this.lastValue = value == null ? '' : value; setIonicClasses(this.element); } @HostListener('ionChange', ['$event.target.value']) _handleInputEvent(value: any) { - if (!this.muteOnChange) { + if (value !== this.lastValue) { + this.lastValue = value; this.onChange(value); } - - this.muteOnChange = false; requestAnimationFrame(() => { setIonicClasses(this.element); diff --git a/angular/src/directives/control-value-accessors/radio-value-accessor.ts b/angular/src/directives/control-value-accessors/radio-value-accessor.ts index e460a53104..fd2821cc8f 100644 --- a/angular/src/directives/control-value-accessors/radio-value-accessor.ts +++ b/angular/src/directives/control-value-accessors/radio-value-accessor.ts @@ -19,21 +19,15 @@ export class RadioValueAccessor implements ControlValueAccessor { onChange: (value: any) => void; onTouched: () => void; + private lastValue: any; constructor(private element: ElementRef) { this.onChange = () => {/**/}; 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; + this.element.nativeElement.checked = this.lastValue = this.value = value; requestAnimationFrame(() => { setIonicClasses(this.element); @@ -42,12 +36,11 @@ export class RadioValueAccessor implements ControlValueAccessor { @HostListener('ionSelect', ['$event.target.checked']) _handleIonSelect(value: any) { - if (!this.muteOnChange) { + if (value !== this.lastValue) { + this.lastValue = value; this.onChange(value); } - this.muteOnChange = false; - requestAnimationFrame(() => { setIonicClasses(this.element); }); diff --git a/angular/src/directives/control-value-accessors/select-value-accessor.ts b/angular/src/directives/control-value-accessors/select-value-accessor.ts index 30367481af..ff26a95203 100644 --- a/angular/src/directives/control-value-accessors/select-value-accessor.ts +++ b/angular/src/directives/control-value-accessors/select-value-accessor.ts @@ -23,16 +23,10 @@ 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; + private lastValue: any; writeValue(value: any) { - this.muteOnChange = true; - this.element.nativeElement.value = value; + this.element.nativeElement.value = this.lastValue = value; requestAnimationFrame(() => { setIonicClasses(this.element); @@ -41,12 +35,11 @@ export class SelectValueAccessor implements ControlValueAccessor { @HostListener('ionChange', ['$event.target.value']) _handleChangeEvent(value: any) { - if (!this.muteOnChange) { + if (value !== this.lastValue) { + this.lastValue = value; this.onChange(value); } - this.muteOnChange = false; - requestAnimationFrame(() => { setIonicClasses(this.element); }); diff --git a/angular/src/directives/control-value-accessors/text-value-accessor.ts b/angular/src/directives/control-value-accessors/text-value-accessor.ts index 8547611345..c7446a7b19 100644 --- a/angular/src/directives/control-value-accessors/text-value-accessor.ts +++ b/angular/src/directives/control-value-accessors/text-value-accessor.ts @@ -23,16 +23,10 @@ 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; + private lastValue: any; writeValue(value: any) { - this.muteOnChange = true; - this.element.nativeElement.value = value; + this.element.nativeElement.value = this.lastValue = value; requestAnimationFrame(() => { setIonicClasses(this.element); @@ -41,12 +35,11 @@ export class TextValueAccessor implements ControlValueAccessor { @HostListener('ionChange', ['$event.target.value']) _handleInputEvent(value: any) { - if (!this.muteOnChange) { + if (value !== this.lastValue) { + this.lastValue = value; this.onChange(value); } - this.muteOnChange = false; - requestAnimationFrame(() => { setIonicClasses(this.element); });