Skip to content

Commit 6d8d915

Browse files
HyperLife1119HyperLife1119
authored
fix(module:input-number): use input event instead of change event (#8989)
1 parent 4cd298b commit 6d8d915

File tree

4 files changed

+299
-135
lines changed

4 files changed

+299
-135
lines changed

‎components/input-number-legacy/input-number.component.ts

-1
Original file line numberDiff line numberDiff line change
@@ -444,7 +444,6 @@ export class NzInputNumberLegacyComponent implements ControlValueAccessor, After
444444
.monitor(this.elementRef, true)
445445
.pipe(takeUntil(this.destroy$))
446446
.subscribe(focusOrigin => {
447-
console.log(focusOrigin);
448447
if (!focusOrigin) {
449448
this.isFocused = false;
450449
this.updateDisplayValue(this.value!);

‎components/input-number/demo/formatter.ts

+8-13
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,9 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
77
selector: 'nz-demo-input-number-formatter',
88
imports: [FormsModule, NzInputNumberModule],
99
template: `
10+
<nz-input-number [(ngModel)]="dollarValue" [nzFormatter]="formatterDollar" [nzParser]="parserDollar" />
1011
<nz-input-number
11-
[(ngModel)]="demoValue"
12-
nzMin="1"
13-
nzMax="100"
14-
[nzFormatter]="formatterDollar"
15-
[nzParser]="parserDollar"
16-
/>
17-
<nz-input-number
18-
[(ngModel)]="demoValue"
12+
[(ngModel)]="percentValue"
1913
nzMin="1"
2014
nzMax="100"
2115
[nzFormatter]="formatterPercent"
@@ -31,9 +25,10 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
3125
]
3226
})
3327
export class NzDemoInputNumberFormatterComponent {
34-
demoValue = 100;
35-
formatterPercent = (value: number): string => `${value} %`;
36-
parserPercent = (value: string): number => +value.replace(' %', '');
37-
formatterDollar = (value: number): string => `$ ${value}`;
38-
parserDollar = (value: string): number => +value.replace('$ ', '');
28+
dollarValue = 1000;
29+
percentValue = 100;
30+
formatterDollar = (value: number): string => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
31+
parserDollar = (value: string): number => parseFloat(value?.replace(/\$\s?|(,*)/g, ''));
32+
formatterPercent = (value: number): string => `${value}%`;
33+
parserPercent = (value: string): number => parseFloat(value?.replace('%', ''));
3934
}

‎components/input-number/input-number.component.spec.ts

+174-60
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
44
*/
55

6-
import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
6+
import { DOWN_ARROW, ENTER, UP_ARROW } from '@angular/cdk/keycodes';
77
import { Component, ElementRef, viewChild } from '@angular/core';
88
import { ComponentFixture, TestBed } from '@angular/core/testing';
99
import { FormsModule } from '@angular/forms';
@@ -134,19 +134,93 @@ describe('Input number', () => {
134134
});
135135
});
136136

137-
it('should be update value through user typing', () => {
138-
component.min = 1;
139-
component.max = 2;
140-
fixture.detectChanges();
137+
describe('should be update value through user typing', () => {
138+
it('normal', () => {
139+
input('123');
140+
expect(component.value).toBe(123);
141+
enter();
142+
expect(component.value).toBe(123);
143+
blur();
144+
expect(component.value).toBe(123);
145+
146+
input('NonNumber');
147+
expect(component.value).toBe(123);
148+
enter();
149+
expect(component.value).toBe(123);
150+
blur();
151+
expect(component.value).toBe(123);
152+
153+
input('');
154+
expect(component.value).toBe(null);
155+
enter();
156+
expect(component.value).toBe(null);
157+
blur();
158+
expect(component.value).toBe(null);
159+
});
141160

142-
userTypingInput('3');
143-
expect(component.value).toBe(2);
144-
userTypingInput('0');
145-
expect(component.value).toBe(1);
146-
userTypingInput('1');
147-
expect(component.value).toBe(1);
148-
userTypingInput('abc');
149-
expect(component.value).toBe(null);
161+
it('with range', () => {
162+
component.min = 1;
163+
component.max = 10;
164+
fixture.detectChanges();
165+
166+
input('1');
167+
expect(component.value).toBe(1);
168+
169+
input('99');
170+
expect(component.value).toBe(1);
171+
blur();
172+
expect(component.value).toBe(10);
173+
174+
input('-99');
175+
expect(component.value).toBe(10);
176+
blur();
177+
expect(component.value).toBe(1);
178+
179+
input('10');
180+
expect(component.value).toBe(10);
181+
blur();
182+
expect(component.value).toBe(10);
183+
184+
input('');
185+
expect(component.value).toBe(null);
186+
blur();
187+
expect(component.value).toBe(null);
188+
});
189+
190+
it('with formatter', () => {
191+
component.formatter = (value: number): string => `${value}%`;
192+
component.parser = (value: string): number => parseFloat(value?.replace('%', ''));
193+
fixture.detectChanges();
194+
195+
const inputElement = getInputElement();
196+
197+
input('123');
198+
fixture.detectChanges();
199+
expect(component.value).toBe(123);
200+
expect(inputElement.value).toBe('123%');
201+
blur();
202+
fixture.detectChanges();
203+
expect(component.value).toBe(123);
204+
expect(inputElement.value).toBe('123%');
205+
206+
input('NonNumber');
207+
fixture.detectChanges();
208+
expect(component.value).toBe(123);
209+
expect(inputElement.value).toBe('NonNumber');
210+
blur();
211+
fixture.detectChanges();
212+
expect(component.value).toBe(123);
213+
expect(inputElement.value).toBe('123%');
214+
215+
input('');
216+
fixture.detectChanges();
217+
expect(component.value).toBe(null);
218+
expect(inputElement.value).toBe('');
219+
blur();
220+
fixture.detectChanges();
221+
expect(component.value).toBe(null);
222+
expect(inputElement.value).toBe('');
223+
});
150224
});
151225

152226
it('should be apply out-of-range class', async () => {
@@ -163,56 +237,85 @@ describe('Input number', () => {
163237
expect(hostElement.classList).toContain('ant-input-number-out-of-range');
164238
});
165239

166-
it('should be set min and max with precision', () => {
167-
component.precision = 0;
240+
describe('should be set min and max with precision', () => {
241+
beforeEach(() => {
242+
component.precision = 0;
243+
component.value = null;
244+
});
168245

169-
// max > 0
170-
component.min = Number.MIN_SAFE_INTEGER;
171-
component.max = 1.5;
172-
fixture.detectChanges();
173-
userTypingInput('1.1');
174-
expect(component.value).toBe(1);
175-
userTypingInput('1.5');
176-
expect(component.value).toBe(1);
246+
it('max > 0', () => {
247+
component.min = Number.MIN_SAFE_INTEGER;
248+
component.max = 1.5;
249+
fixture.detectChanges();
177250

178-
// max < 0
179-
component.min = Number.MIN_SAFE_INTEGER;
180-
component.max = -1.5;
181-
fixture.detectChanges();
182-
userTypingInput('-1.1');
183-
expect(component.value).toBe(-2);
184-
userTypingInput('-1.5');
185-
expect(component.value).toBe(-2);
186-
187-
// min > 0
188-
component.min = 1.5;
189-
component.max = Number.MAX_SAFE_INTEGER;
190-
fixture.detectChanges();
191-
userTypingInput('1.1');
192-
expect(component.value).toBe(2);
193-
userTypingInput('1.5');
194-
expect(component.value).toBe(2);
251+
input('1.1');
252+
expect(component.value).toBe(1.1);
253+
blur();
254+
expect(component.value).toBe(1);
255+
input('1.5');
256+
expect(component.value).toBe(1.5);
257+
blur();
258+
expect(component.value).toBe(1);
259+
});
195260

196-
// min < 0
197-
component.min = -1.5;
198-
component.max = Number.MAX_SAFE_INTEGER;
199-
fixture.detectChanges();
200-
userTypingInput('-1.1');
201-
expect(component.value).toBe(-1);
202-
userTypingInput('-1.5');
203-
expect(component.value).toBe(-1);
261+
it('max < 0', () => {
262+
component.min = Number.MIN_SAFE_INTEGER;
263+
component.max = -1.5;
264+
fixture.detectChanges();
265+
266+
input('-1.1');
267+
expect(component.value).toBe(null);
268+
blur();
269+
expect(component.value).toBe(-2);
270+
input('-1.5');
271+
expect(component.value).toBe(-1.5);
272+
blur();
273+
expect(component.value).toBe(-2);
274+
});
275+
276+
it('min > 0', () => {
277+
component.min = 1.5;
278+
component.max = Number.MAX_SAFE_INTEGER;
279+
fixture.detectChanges();
280+
281+
input('1.1');
282+
expect(component.value).toBe(null);
283+
blur();
284+
expect(component.value).toBe(2);
285+
input('1.5');
286+
expect(component.value).toBe(1.5);
287+
blur();
288+
expect(component.value).toBe(2);
289+
});
290+
291+
it('min < 0', () => {
292+
component.min = -1.5;
293+
component.max = Number.MAX_SAFE_INTEGER;
294+
fixture.detectChanges();
295+
296+
input('-1.1');
297+
expect(component.value).toBe(-1.1);
298+
blur();
299+
expect(component.value).toBe(-1);
300+
input('-1.5');
301+
expect(component.value).toBe(-1.5);
302+
blur();
303+
expect(component.value).toBe(-1);
304+
});
204305
});
205306

206-
it('should set precision', async () => {
307+
it('should set value with precision', async () => {
207308
component.precision = 1;
208-
component.value = 1.23;
209309
fixture.detectChanges();
210-
await fixture.whenStable();
310+
311+
input('1.23');
312+
expect(component.value).toBe(1.23);
313+
blur();
211314
expect(component.value).toBe(1.2);
212315

213-
component.value = 1.25;
214-
fixture.detectChanges();
215-
await fixture.whenStable();
316+
input('1.25');
317+
expect(component.value).toBe(1.25);
318+
blur();
216319
expect(component.value).toBe(1.3);
217320
});
218321

@@ -284,16 +387,23 @@ describe('Input number', () => {
284387
function upStepByKeyboard(): void {
285388
hostElement.dispatchEvent(new KeyboardEvent('keydown', { keyCode: UP_ARROW }));
286389
}
287-
288390
function downStepByKeyboard(): void {
289391
hostElement.dispatchEvent(new KeyboardEvent('keydown', { keyCode: DOWN_ARROW }));
290392
}
393+
function enter(): void {
394+
hostElement.dispatchEvent(new KeyboardEvent('keydown', { keyCode: ENTER }));
395+
}
291396

292-
function userTypingInput(text: string): void {
293-
const input = hostElement.querySelector('input')!;
294-
input.value = text;
295-
input.dispatchEvent(new Event('input'));
296-
input.dispatchEvent(new Event('change'));
397+
function getInputElement(): HTMLInputElement {
398+
return fixture.nativeElement.querySelector('input')!;
399+
}
400+
function input(text: string): void {
401+
const element = getInputElement();
402+
element.value = text;
403+
element.dispatchEvent(new Event('input'));
404+
}
405+
function blur(): void {
406+
getInputElement().dispatchEvent(new Event('blur'));
297407
}
298408
});
299409

@@ -359,6 +469,8 @@ describe('Input number with affixes or addons', () => {
359469
[nzBordered]="bordered"
360470
[nzKeyboard]="keyboard"
361471
[nzControls]="controls"
472+
[nzParser]="parser"
473+
[nzFormatter]="formatter"
362474
[(ngModel)]="value"
363475
[disabled]="controlDisabled"
364476
/>
@@ -378,6 +490,8 @@ class InputNumberTestComponent {
378490
bordered = true;
379491
keyboard = true;
380492
controls = true;
493+
parser: ((value: string) => number) | undefined = undefined;
494+
formatter: ((value: number) => string) | undefined = undefined;
381495

382496
value: number | null = null;
383497
controlDisabled = false;

0 commit comments

Comments
 (0)