diff --git a/components/input-number/nz-input-number.component.ts b/components/input-number/nz-input-number.component.ts index f917774a2c2..52d4b4ed2f7 100644 --- a/components/input-number/nz-input-number.component.ts +++ b/components/input-number/nz-input-number.component.ts @@ -68,6 +68,7 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn private _step = 1; private autoStepTimer; private _autoFocus = false; + private _formatter = (value) => value; displayValue: string | number; actualValue: string | number; isFocused = false; @@ -82,7 +83,6 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn @Input() nzSize: 'small' | 'default' | 'large' = 'default'; @Input() nzMin: number = -Infinity; @Input() nzMax: number = Infinity; - @Input() nzFormatter = (value) => value; @Input() nzParser = (value) => value; @Input() nzPrecision: number; @@ -125,6 +125,17 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn return this._step; } + @Input() + set nzFormatter(v: (value: number) => string | number) { + this._formatter = v; + const value = this.getCurrentValidValue(this.actualValue); + this.writeValue(value); + } + + get nzFormatter(): (value: number) => string | number { + return this._formatter; + } + updateAutoFocus(): void { if (this.isInit) { if (this.nzAutoFocus) { diff --git a/components/input-number/nz-input-number.spec.ts b/components/input-number/nz-input-number.spec.ts index f6dcc0f1fa7..436b284602b 100644 --- a/components/input-number/nz-input-number.spec.ts +++ b/components/input-number/nz-input-number.spec.ts @@ -366,6 +366,15 @@ describe('input number', () => { fixture.detectChanges(); expect(testComponent.value).toBe(-10); }); + it('should update value immediatelly after formatter changed', (() => { + const newFormatter = v => `${v} %`; + const initValue = '1'; + testComponent.nzInputNumberComponent.onModelChange(initValue); + fixture.detectChanges(); + testComponent.formatter = newFormatter; + fixture.detectChanges(); + expect(inputElement.value).toBe(newFormatter(initValue)); + })); }); describe('input number form', () => { let fixture;