Skip to content

Commit

Permalink
fix(module:input,datepicker,input-number,select,slider): still dirty …
Browse files Browse the repository at this point in the history 
…when "form.reset()" called (#257)

change the "writeValue" to not trigger "view -> control updating" while "control -> view updating"

close #114
  • Loading branch information
@wilsoncook @vthinkxie
wilsoncook authored and vthinkxie committed Sep 9, 2017
1 parent d8063a1 commit 4233db1
Show file tree
Hide file tree
Showing 5 changed files with 80 additions and 63 deletions.
27 changes: 16 additions & 11 deletions src/components/datepicker/nz-datepicker.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
}
}
27 changes: 17 additions & 10 deletions src/components/input-number/nz-input-number.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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 {
Expand All @@ -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);
}
}
4 changes: 2 additions & 2 deletions src/components/input/nz-input.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,6 @@ export class NzInputComponent implements AfterContentInit, ControlValueAccessor,
this.onChange(this._value);
}


get nzValue(): any {
return this._value;
};
Expand Down Expand Up @@ -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 {
Expand Down
67 changes: 36 additions & 31 deletions src/components/select/nz-select.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)) {
Expand Down Expand Up @@ -490,37 +492,12 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
};

set nzValue(value: Array<string> | 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);
});
}

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
}
}
}
18 changes: 9 additions & 9 deletions src/components/slider/nz-slider.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -566,10 +566,10 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange

// print debug info
log(...messages: Array<any>) {
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'
Expand Down

0 comments on commit 4233db1

Please sign in to comment.