如何在Angular FormControl中限制输入框的小数显示位数？

核心原生方案：自定义ControlValueAccessor #

Angular原生提供的ControlValueAccessor接口，专门用来处理表单控件**模型值（数字类型）和视图显示值（格式化字符串）**的双向转换，完美匹配你的需求——模型始终保持数字，仅在视图层做格式化展示，提交或逻辑处理时用原始数字。

实现步骤 #

1. 创建自定义数字输入组件
   实现ControlValueAccessor接口，定义格式化规则（比如千分位、保留小数位数），同时处理用户输入的格式化字符串转回数字的逻辑。

   示例代码：

   import { Component, forwardRef } from '@angular/core';
   import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
   
   @Component({
     selector: 'app-formatted-number-input',
     template: `
       <input 
         type="text" 
         [value]="displayValue" 
         (input)="onInputChange($event.target.value)"
         (blur)="onTouched()"
       >
     `,
     providers: [
       {
         provide: NG_VALUE_ACCESSOR,
         useExisting: forwardRef(() => FormattedNumberInputComponent),
         multi: true
       }
     ]
   })
   export class FormattedNumberInputComponent implements ControlValueAccessor {
     private innerValue: number | null = null;
     displayValue: string = '';
   
     // 自定义格式化规则：这里以千分位+保留2位小数为例
     private formatNumber(num: number): string {
       return num.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
     }
   
     // 解析用户输入的字符串转回数字
     private parseNumber(str: string): number | null {
       const cleanedStr = str.replace(/[^0-9.]/g, '');
       return cleanedStr ? parseFloat(cleanedStr) : null;
     }
   
     writeValue(value: number | null): void {
       this.innerValue = value;
       this.displayValue = value ? this.formatNumber(value) : '';
     }
   
     registerOnChange(fn: any): void {
       this.onChange = fn;
     }
   
     registerOnTouched(fn: any): void {
       this.onTouched = fn;
     }
   
     onInputChange(value: string): void {
       const parsedValue = this.parseNumber(value);
       this.innerValue = parsedValue;
       this.displayValue = parsedValue ? this.formatNumber(parsedValue) : '';
       this.onChange(parsedValue);
     }
   
     private onChange: (value: number | null) => void = () => {};
     private onTouched: () => void = () => {};
   }
   

2. 在响应式表单中使用自定义组件
   像原生输入框一样绑定表单控件，模型值会自动保持数字类型：

   import { FormBuilder, FormGroup } from '@angular/forms';
   
   export class AppComponent {
     myForm: FormGroup;
   
     constructor(private fb: FormBuilder) {
       this.myForm = this.fb.group({
         amount: [12345.67] // 初始值为数字，绑定后仍保持数字类型
       });
   
       // 验证模型值类型
       this.myForm.get('amount')?.valueChanges.subscribe(val => {
         console.log(typeof val); // 输出 'number'
       });
     }
   }
   

   模板中使用：

   <form [formGroup]="myForm">
     <app-formatted-number-input formControlName="amount"></app-formatted-number-input>
   </form>
   

简单场景替代方案：配合DecimalPipe处理 #

如果不想自定义组件，也可以用Angular内置的DecimalPipe做视图格式化，同时手动处理输入转数字的逻辑：

<input 
  type="text" 
  [ngModel]="myForm.get('amount')?.value | number:'1.2-2'" 
  (ngModelChange)="onAmountChange($event)"
  [ngModelOptions]="{standalone: true}"
>

onAmountChange(value: string): void {
  const parsed = parseFloat(value.replace(/[^0-9.]/g, ''));
  this.myForm.get('amount')?.setValue(isNaN(parsed) ? null : parsed);
}

这种方式适合简单场景，但自定义ControlValueAccessor的复用性更强，是Angular原生的标准解决方案。

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