From 4233db1105f485c7d420b5273d121fc21d9f039c Mon Sep 17 00:00:00 2001 From: Wilson Zeng Date: Sat, 9 Sep 2017 22:44:55 +0800 Subject: [PATCH] fix(module:input,datepicker,input-number,select,slider): still dirty when "form.reset()" called (#257) change the "writeValue" to not trigger "view -> control updating" while "control -> view updating" close #114 --- .../datepicker/nz-datepicker.component.ts | 27 +++++--- .../input-number/nz-input-number.component.ts | 27 +++++--- src/components/input/nz-input.component.ts | 4 +- src/components/select/nz-select.component.ts | 67 ++++++++++--------- src/components/slider/nz-slider.component.ts | 18 ++--- 5 files changed, 80 insertions(+), 63 deletions(-) diff --git a/src/components/datepicker/nz-datepicker.component.ts b/src/components/datepicker/nz-datepicker.component.ts index 093eb8d5ed..d82854ceed 100644 --- a/src/components/datepicker/nz-datepicker.component.ts +++ b/src/components/datepicker/nz-datepicker.component.ts @@ -238,16 +238,7 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit { }; set nzValue(value: Date) { - if (this._value === value) { - return; - } - this._value = value; - this._selectedMonth = moment(this.nzValue).month(); - this._selectedYear = moment(this.nzValue).year(); - this._selectedDate = moment(this.nzValue).date(); - this._showYear = moment(this.nzValue).year(); - this._showMonth = moment(this.nzValue).month(); - this._startDecade = Math.floor(this._showYear / 10) * 10; + this._updateValue(value); }; _changeTime($event) { @@ -400,7 +391,8 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit { } writeValue(value: any): void { - this.nzValue = value; + // this.nzValue = value; + this._updateValue(value); } registerOnChange(fn: (_: any) => {}): void { @@ -414,4 +406,17 @@ export class NzDatePickerComponent implements ControlValueAccessor, OnInit { setDisabledState(isDisabled: boolean): void { this.nzDisabled = isDisabled; } + + private _updateValue(value: any) { + if (this._value === value) { + return; + } + this._value = value; + this._selectedMonth = moment(this.nzValue).month(); + this._selectedYear = moment(this.nzValue).year(); + this._selectedDate = moment(this.nzValue).date(); + this._showYear = moment(this.nzValue).year(); + this._showMonth = moment(this.nzValue).month(); + this._startDecade = Math.floor(this._showYear / 10) * 10; + } } diff --git a/src/components/input-number/nz-input-number.component.ts b/src/components/input-number/nz-input-number.component.ts index 1a4eb38163..7081244c54 100644 --- a/src/components/input-number/nz-input-number.component.ts +++ b/src/components/input-number/nz-input-number.component.ts @@ -135,15 +135,7 @@ export class NzInputNumberComponent implements ControlValueAccessor { }; set nzValue(value: number) { - if (this._value === value) { - return; - } - this._value = this._getBoundValue(value); - this._displayValue = this._value; - this._inputNumber.nativeElement.value = this._value; - this.onChange(this._value); - this._disabledUp = (this.nzValue !== undefined) && !((this.nzValue + this.nzStep) <= this.nzMax); - this._disabledDown = (this.nzValue !== undefined) && !((this.nzValue - this.nzStep) >= this.nzMin); + this._updateValue(value); } _userInputChange() { @@ -184,7 +176,8 @@ export class NzInputNumberComponent implements ControlValueAccessor { } writeValue(value: any): void { - this.nzValue = value; + // this.nzValue = value; + this._updateValue(value, false); } registerOnChange(fn: (_: any) => {}): void { @@ -198,4 +191,18 @@ export class NzInputNumberComponent implements ControlValueAccessor { setDisabledState(isDisabled: boolean): void { this.nzDisabled = isDisabled; } + + private _updateValue(value: number, emitChange = true) { + if (this._value === value) { + return; + } + this._value = this._getBoundValue(value); + this._displayValue = this._value; + this._inputNumber.nativeElement.value = this._value; + if (emitChange) { + this.onChange(this._value); + } + this._disabledUp = (this.nzValue !== undefined) && !((this.nzValue + this.nzStep) <= this.nzMax); + this._disabledDown = (this.nzValue !== undefined) && !((this.nzValue - this.nzStep) >= this.nzMin); + } } diff --git a/src/components/input/nz-input.component.ts b/src/components/input/nz-input.component.ts index 34f75372e4..33e81e4245 100644 --- a/src/components/input/nz-input.component.ts +++ b/src/components/input/nz-input.component.ts @@ -173,7 +173,6 @@ export class NzInputComponent implements AfterContentInit, ControlValueAccessor, this.onChange(this._value); } - get nzValue(): any { return this._value; }; @@ -243,7 +242,8 @@ export class NzInputComponent implements AfterContentInit, ControlValueAccessor, } writeValue(value: any): void { - this.nzValue = value; + // this.nzValue = value; // [NOTE] nzValue will trigger the onChange which leads to a new "VIEW -> MODEL updating" + this._value = value; } registerOnChange(fn: (_: any) => {}): void { diff --git a/src/components/select/nz-select.component.ts b/src/components/select/nz-select.component.ts index a9b6ba5d69..4ee3b5de71 100644 --- a/src/components/select/nz-select.component.ts +++ b/src/components/select/nz-select.component.ts @@ -404,10 +404,12 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent } /** cancel select multiple option */ - unSelectMultipleOption = (option, $event?) => { + unSelectMultipleOption = (option, $event?, emitChange = true) => { this._operatingMultipleOption = option; this._selectedOptions.delete(option); - this.emitMultipleOptions(); + if (emitChange) { + this.emitMultipleOptions(); + } // 对Tag进行特殊处理 if (this._isTags && (this._options.indexOf(option) !== -1) && (this._tagsOptions.indexOf(option) !== -1)) { @@ -490,37 +492,12 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent }; set nzValue(value: Array | string) { - if (this._value === value) { - return; - } - if ((value === null) && this.nzMultiple) { - this._value = []; - } else { - this._value = value; - } - if (!this.nzMultiple) { - if (value === null) { - this._selectedOption = null; - } else { - this.updateSelectedOption(value); - } - } else { - if (value) { - if (value.length === 0) { - this.clearAllSelectedOption(); - } else { - this.updateSelectedOption(value, true); - } - } else if (value === null) { - this.clearAllSelectedOption(); - } - - } + this._updateValue(value); } - clearAllSelectedOption() { + clearAllSelectedOption(emitChange = true) { this._selectedOptions.forEach(item => { - this.unSelectMultipleOption(item); + this.unSelectMultipleOption(item, null, emitChange); }); } @@ -692,7 +669,8 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent } writeValue(value: any): void { - this.nzValue = value; + // this.nzValue = value; + this._updateValue(value, false); } registerOnChange(fn: (_: any) => {}): void { @@ -731,6 +709,33 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent } else { this.updateFilterOption(false); } + } + private _updateValue(value: string[] | string, emitChange = true) { + if (this._value === value) { + return; + } + if ((value === null) && this.nzMultiple) { + this._value = []; + } else { + this._value = value; + } + if (!this.nzMultiple) { + if (value === null) { + this._selectedOption = null; + } else { + this.updateSelectedOption(value); + } + } else { + if (value) { + if (value.length === 0) { + this.clearAllSelectedOption(emitChange); + } else { + this.updateSelectedOption(value, true); + } + } else if (value === null) { + this.clearAllSelectedOption(emitChange); + } + } } } diff --git a/src/components/slider/nz-slider.component.ts b/src/components/slider/nz-slider.component.ts index 88a133ea3b..c09bdfc909 100644 --- a/src/components/slider/nz-slider.component.ts +++ b/src/components/slider/nz-slider.component.ts @@ -162,16 +162,16 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange // |-------------------------------------------------------------------------------------------- setValue(val: SliderValue, isWriteValue: boolean = false) { - if (isWriteValue) { // [ngModel-writeValue]: Formatting before setting value, always update current value, but trigger onValueChange ONLY when the "formatted value" equals "input value" + if (isWriteValue) { // [ngModel-writeValue]: Formatting before setting value, always update current value, but trigger onValueChange ONLY when the "formatted value" not equals "input value" this.value = this.formatValue(val); this.log(`[ngModel:setValue/writeValue]Update track & handles`); this.updateTrackAndHandles(); - if (!this.isValueEqual(this.value, val)) { - this.log(`[ngModel:setValue/writeValue]onValueChange`, val); - if (this.onValueChange) { // NOTE: onValueChange will be unavailable when writeValue() called at the first time - this.onValueChange(this.value); - } - } + // if (!this.isValueEqual(this.value, val)) { + // this.log(`[ngModel:setValue/writeValue]onValueChange`, val); + // if (this.onValueChange) { // NOTE: onValueChange will be unavailable when writeValue() called at the first time + // this.onValueChange(this.value); + // } + // } } else { // [Normal]: setting value, ONLY check changed, then update and trigger onValueChange if (!this.isValueEqual(this.value, val)) { this.value = val; @@ -566,10 +566,10 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange // print debug info log(...messages: Array) { - if (this.nzDebugId !== null) { + // if (this.nzDebugId !== null) { const args = [ `[nz-slider][#${this.nzDebugId}] ` ].concat(Array.prototype.slice.call(arguments)); console.log.apply(null, args); - } + // } } // Show one handle's tooltip and hide others'