fix(module:input-number): use input event instead of change event

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

@@ -444,7 +444,6 @@ export class NzInputNumberLegacyComponent implements ControlValueAccessor, After
       .monitor(this.elementRef, true)
       .pipe(takeUntil(this.destroy$))
       .subscribe(focusOrigin => {
-        console.log(focusOrigin);
         if (!focusOrigin) {
           this.isFocused = false;
           this.updateDisplayValue(this.value!);

components/input-number/demo/formatter.ts

@@ -7,15 +7,9 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
   selector: 'nz-demo-input-number-formatter',
   imports: [FormsModule, NzInputNumberModule],
   template: `
+    <nz-input-number [(ngModel)]="dollarValue" [nzFormatter]="formatterDollar" [nzParser]="parserDollar" />
     <nz-input-number
-      [(ngModel)]="demoValue"
-      nzMin="1"
-      nzMax="100"
-      [nzFormatter]="formatterDollar"
-      [nzParser]="parserDollar"
-    />
-    <nz-input-number
-      [(ngModel)]="demoValue"
+      [(ngModel)]="percentValue"
       nzMin="1"
       nzMax="100"
       [nzFormatter]="formatterPercent"
@@ -31,9 +25,10 @@ import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
   ]
 })
 export class NzDemoInputNumberFormatterComponent {
-  demoValue = 100;
-  formatterPercent = (value: number): string => `${value} %`;
-  parserPercent = (value: string): number => +value.replace(' %', '');
-  formatterDollar = (value: number): string => `$ ${value}`;
-  parserDollar = (value: string): number => +value.replace('$ ', '');
+  dollarValue = 1000;
+  percentValue = 100;
+  formatterDollar = (value: number): string => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  parserDollar = (value: string): number => parseFloat(value?.replace(/\$\s?|(,*)/g, ''));
+  formatterPercent = (value: number): string => `${value}%`;
+  parserPercent = (value: string): number => parseFloat(value?.replace('%', ''));
 }

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

@@ -130,6 +130,15 @@ describe('Input number', () => {
   });
 
   it('should be update value through user typing', () => {
+    userTypingInput('123');
+    expect(component.value).toBe(123);
+    userTypingInput('');
+    expect(component.value).toBe(null);
+    userTypingInput('NonNumber');
+    expect(component.value).toBe(null);
+  });
+
+  it('should be update value through user typing with range', () => {
     component.min = 1;
     component.max = 2;
     fixture.detectChanges();
@@ -140,7 +149,9 @@ describe('Input number', () => {
     expect(component.value).toBe(1);
     userTypingInput('1');
     expect(component.value).toBe(1);
-    userTypingInput('abc');
+    userTypingInput('');
+    expect(component.value).toBe(null);
+    userTypingInput('NonNumber');
     expect(component.value).toBe(null);
   });
 
@@ -288,7 +299,6 @@ describe('Input number', () => {
     const input = hostElement.querySelector('input')!;
     input.value = text;
     input.dispatchEvent(new Event('input'));
-    input.dispatchEvent(new Event('change'));
   }
 });
 

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

@@ -34,7 +34,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { NzFormItemFeedbackIconComponent, NzFormStatusService } from 'ng-zorro-antd/core/form';
 import { NzSizeLDSType, NzStatus, NzValidateStatus, OnChangeType, OnTouchedType } from 'ng-zorro-antd/core/types';
-import { getStatusClassNames, isNil } from 'ng-zorro-antd/core/util';
+import { getStatusClassNames, isNil, isNotNil } from 'ng-zorro-antd/core/util';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import {
   NzInputAddonAfterDirective,
@@ -147,13 +147,13 @@ import { NZ_SPACE_COMPACT_ITEM_TYPE, NZ_SPACE_COMPACT_SIZE, NzSpaceCompactItemDi
           [attr.aria-valuemin]="nzMin()"
           [attr.aria-valuemax]="nzMax()"
           [attr.id]="nzId()"
-          [value]="displayValue()"
           [attr.step]="nzStep()"
+          [attr.value]="displayValue()"
+          [value]="displayValue()"
           [placeholder]="nzPlaceHolder() ?? ''"
           [disabled]="finalDisabled()"
           [readOnly]="nzReadOnly()"
-          (input)="displayValue.set(input.value)"
-          (change)="onInputChange($event)"
+          (input)="onInputChange(input.value)"
         />
       </div>
     </ng-template>
@@ -307,6 +307,7 @@ export class NzInputNumberComponent implements OnInit, ControlValueAccessor {
           this.focused.set(!!origin);
 
           if (!origin) {
+            this.fixValue();
             this.onTouched();
           }
         });
@@ -381,18 +382,20 @@ export class NzInputNumberComponent implements OnInit, ControlValueAccessor {
   private setValue(value: number | string | null, userTyping?: boolean): void {
     let parsedValue: number | null = null;
 
-    if (!isNil(value)) {
+    if (isNotNil(value) && value !== '' && !Number.isNaN(value)) {
       parsedValue = this.nzParser()(value.toString());
 
       // If the user is typing, we need to make sure the value is in the range.
       // Instead, we allow values to be set out of range programmatically,
       // and display out-of-range values as errors.
       if (userTyping) {
-        if (Number.isNaN(parsedValue)) {
-          parsedValue = null;
-        } else {
-          parsedValue = getRangeValueWithPrecision(parsedValue, this.nzMin(), this.nzMax(), this.nzPrecision());
+        // If the value is not complete number, or it's NaN after parsed, ignore this change.
+        // And then call `fixValue` when on blur.
+        if (isNotCompleteNumber(value) || Number.isNaN(parsedValue)) {
+          return;
         }
+
+        parsedValue = getRangeValueWithPrecision(parsedValue, this.nzMin(), this.nzMax(), this.nzPrecision());
       }
     }
 
@@ -401,6 +404,13 @@ export class NzInputNumberComponent implements OnInit, ControlValueAccessor {
     this.onChange(parsedValue);
   }
 
+  private fixValue(): void {
+    const parsedValue = this.nzParser()(this.displayValue());
+    // Use parseFloat to try to fix the value.
+    this.setValue(parseFloat(parsedValue.toString()), true);
+    this.inputRef().nativeElement.value = this.displayValue();
+  }
+
   protected stopAutoStep(): void {
     if (this.autoStepTimer !== null) {
       clearTimeout(this.autoStepTimer);
@@ -437,9 +447,8 @@ export class NzInputNumberComponent implements OnInit, ControlValueAccessor {
     }
   }
 
-  protected onInputChange(value: Event): void {
-    const target = value.target as HTMLInputElement;
-    this.setValue(target.value, true);
+  protected onInputChange(value: string): void {
+    this.setValue(value, true);
   }
 }
 
@@ -503,3 +512,7 @@ function getRangeValueWithPrecision(value: number, min: number, max: number, pre
 function getDecimalPlaces(num: number): number {
   return num.toString().split('.')[1]?.length || 0;
 }
+
+function isNotCompleteNumber(value: string | number): boolean {
+  return /[.。]$/.test(value.toString());
+}