Angular项目中NG ZORRO数字输入框添加千分位分隔符方法咨询

原生type="number"的输入框无法显示千分位分隔符（浏览器会自动过滤非数字字符），因此需要改用type="text"，结合Angular的管道或自定义指令实现格式化显示，同时保证表单控件存储的是纯数字值。以下是两种可行方案：

方案一：使用Angular DecimalPipe + 双向绑定处理 #

1. 组件逻辑处理 #

在组件中注入内置的DecimalPipe，监听表单值变化以维护纯数字的控件值，同时提供格式化后的显示值：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { DecimalPipe } from '@angular/common';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  providers: [DecimalPipe]
})
export class YourComponentComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder, private decimalPipe: DecimalPipe) {
    this.form = this.fb.group({
      'my-input': [null]
    });

    // 过滤输入内容，保留纯数字格式
    this.form.get('my-input')?.valueChanges.subscribe(val => {
      if (typeof val === 'string') {
        // 移除所有非数字、非小数点字符，确保仅一个小数点
        const pureNum = val.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        this.form.get('my-input')?.setValue(pureNum, { emitEvent: false });
      }
    });
  }

  // 返回带千分位的格式化显示值
  getDisplayValue(): string {
    const value = this.form.get('my-input')?.value;
    if (value && !isNaN(+value)) {
      // 格式规则：整数部分至少1位，小数部分0-2位，可按需调整
      return this.decimalPipe.transform(value, '1.0-2');
    }
    return '';
  }
}

2. 修改模板代码 #

将输入框类型改为text，绑定格式化后的显示值，并同步输入内容到表单控件：

<nz-form-item>
    <nz-form-control nzErrorTip="Origination is required!">
        <nz-input-group nzAddOnAfter="%">
            <input 
                formControlName="my-input" 
                nz-input 
                type="text" 
                [value]="getDisplayValue()"
                (input)="form.get('my-input')?.setValue($event.target.value)"
            />
        </nz-input-group>
    </nz-form-control>
</nz-form-item>

方案二：自定义指令实现实时格式化 #

这种方式可复用性更高，无需在每个组件中重复编写逻辑：

1. 创建自定义指令 #

import { Directive, HostListener, ElementRef, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appNumberFormat]'
})
export class NumberFormatDirective implements OnInit {
  constructor(private el: ElementRef, private control: NgControl) {}

  ngOnInit(): void {
    // 初始化时格式化已有值
    this.formatValue(this.control.value);
  }

  @HostListener('input', ['$event.target.value'])
  onInput(value: string): void {
    // 过滤输入内容，保留纯数字和单个小数点
    const pureValue = value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
    // 添加千分位分隔符
    const formattedValue = this.addThousandSeparator(pureValue);
    // 更新输入框显示
    this.el.nativeElement.value = formattedValue;
    // 更新表单控件的纯数字值
    this.control.control?.setValue(formattedValue.replace(/,/g, ''), { emitEvent: false });
  }

  // 给数字字符串添加千分位分隔符
  private addThousandSeparator(numStr: string): string {
    if (!numStr) return '';
    const parts = numStr.split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return parts.join('.');
  }

  // 初始化格式化
  private formatValue(value: string | number): void {
    if (value) {
      const formatted = this.addThousandSeparator(value.toString());
      this.el.nativeElement.value = formatted;
    }
  }
}

2. 在模板中使用指令 #

只需将输入框改为text并添加指令即可：

<nz-form-item>
    <nz-form-control nzErrorTip="Origination is required!">
        <nz-input-group nzAddOnAfter="%">
            <input 
                formControlName="my-input" 
                nz-input 
                type="text" 
                appNumberFormat
            />
        </nz-input-group>
    </nz-form-control>
</nz-form-item>

内容的提问来源于stack exchange，提问作者core114