[nz-input-number]: custom decimal separator

[JoniVR]

What problem does this feature solve?

In the React version of Ant Design, the input-number component supports a decimalSeparator property. Some languages have different language separators than the regular .

This would allow us to use our own decimal separator, so we can adjust to the proper locale standards.

An alternative approach would be automatically following the configured locale, though I'm not sure how easy that'd be to implement.

What does the proposed API look like?

2 possible solutions:

• add decimalSeparator input property to nz-number-input (more consistent with ant-design react?)
• follow configured locale automatically to use the correct decimal separator.

[wzhudev]

Maybe you could use nzFormatter as a temporary solution?

[wzhudev]

https://angular.io/api/common/getLocaleNumberFormat

[JoniVR]

Hi,

I have thought about this, but this wouldn't solve having to use . during keyboard input, which is really counter-intuitive. I'd rather not use nz-formatter for that reason.

[JoniVR]

@wendellhu95 Fyi, I did a fork branch where I semi-implemented it as you might want to, I don't think it's ready for integration into the library itself but feel free to extend/use it if you ever decide to implement it:

https://github.com/JoniVR/ng-zorro-antd/commit/4e27398162346f0714b520a75fe3369b3b7c73a0

diff:

diff --git a/components/input-number/input-number.component.ts b/components/input-number/input-number.component.ts
index d8bac55758..5e7bcb2017 100644
--- a/components/input-number/input-number.component.ts
+++ b/components/input-number/input-number.component.ts
@@ -115,11 +115,12 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   @Input() nzSize: NzSizeLDSType = 'default';
   @Input() nzMin: number = -Infinity;
   @Input() nzMax: number = Infinity;
+  @Input() nzSeparator: string = '.';
   @Input() nzParser = (value: string) =>
     value
       .trim()
-      .replace(/。/g, '.')
-      .replace(/[^\w\.-]+/g, '');
+      .replace(/[。,.]/g, this.nzSeparator)
+      .replace(new RegExp(`/[^\d${this.nzSeparator}-]+/g`), '');
   @Input() nzPrecision?: number;
   @Input() nzPrecisionMode: 'cut' | 'toFixed' | ((value: number | string, precision?: number) => number) = 'toFixed';
   @Input() nzPlaceHolder = '';
@@ -128,12 +129,12 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
   @Input() nzId: string | null = null;
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzAutoFocus = false;
-  @Input() nzFormatter: (value: number) => string | number = value => value;
+  @Input() nzFormatter: (value: number) => string | number = value => value.toString().replace('.', this.nzSeparator);

   onModelChange(value: string): void {
     this.parsedValue = this.nzParser(value);
     this.inputElement.nativeElement.value = `${this.parsedValue}`;
-    const validValue = this.getCurrentValidValue(this.parsedValue);
+    const validValue = this.getCurrentValidValue(this.parsedValue.replace(this.nzSeparator, '.'));
     this.setValue(validValue);
   }

This also shows why I can't use nzFormatter and nzParser, I still need to change something inside onModelChange for it to work, unless I'm missing something.

[fscamuzzisp]

Hi any progess or news?

[borgoran]

I have the same problem when I want to use decimal separator ',' instead of '.' in case of German language. Could anyone help us with this @wzhudev ? Thanks in advance.