Angular中NgModel不保留小数末尾零？如何获取完整输入值？

问题原因 #

当你使用<input type="number">结合NgModel时，Angular会自动将输入值转换为Number类型。而1.000作为Number值，本质和1完全等价，调用toString()后自然只会得到"1"。

原生keyup/change事件获取的evt.target.value是字符串类型，会原封不动保留用户输入的格式，因此能拿到"1.000"。

解决方案 #

根据你的精度需求，有几种可行的处理方式：

1. 改用type="text"输入框（最简单）

将输入框的type从number改为text，NgModel会以字符串形式绑定值，完整保留用户输入的小数位数。需自行添加数字校验逻辑，确保输入为合法数值：

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <h3>Enter a value like "1.000"</h3>
    <input type="text" [(ngModel)]="value" (ngModelChange)="onNgChange($event)">

    <br><br><br>
    <span>From NgModel:</span>
    <div>{{fromNgModel}}</div>
  `,
})
export class App {
  name = 'Angular';
  value?: string = null; // 类型改为string

  fromNgModel: any = null;

  onNgChange(evt: string) {
    // 可选：添加数字校验，例：/^\d+(\.\d+)?$/.test(evt)
    this.fromNgModel = evt;
  }
}

2. 自定义ValueAccessor（保留type="number"同时保留精度）

若必须使用type="number"，可自定义表单控件的ValueAccessor，手动处理数值与字符串的转换，确保保留输入格式：

import { Directive, ElementRef, forwardRef, HostListener } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  selector: 'input[type="number"][keep-decimal]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => KeepDecimalValueAccessor),
      multi: true
    }
  ]
})
export class KeepDecimalValueAccessor implements ControlValueAccessor {
  constructor(private el: ElementRef<HTMLInputElement>) {}

  private onChange: (value: string) => void = () => {};
  private onTouched: () => void = () => {};

  writeValue(value: string | number): void {
    this.el.nativeElement.value = typeof value === 'number' ? value.toString() : value;
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  @HostListener('input', ['$event.target.value'])
  handleInput(value: string): void {
    this.onChange(value);
  }

  @HostListener('blur')
  handleBlur(): void {
    this.onTouched();
  }
}

组件中使用该指令：

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, KeepDecimalValueAccessor],
  template: `
    <h3>Enter a value like "1.000"</h3>
    <input type="number" keep-decimal [(ngModel)]="value" (ngModelChange)="onNgChange($event)">

    <br><br><br>
    <span>From NgModel:</span>
    <div>{{fromNgModel}}</div>
  `,
})
export class App {
  name = 'Angular';
  value?: string = null;

  fromNgModel: any = null;

  onNgChange(evt: string) {
    this.fromNgModel = evt;
  }
}

3. 结合原生事件同步值（折中方案）

若不想修改输入类型或自定义控件，可在ngModelChange触发时，用原生输入框的value覆盖NgModel值，确保保留格式：

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule],
  template: `
    <h3>Enter a value like "1.000"</h3>
    <input #numInput type="number" [(ngModel)]="value" (ngModelChange)="syncValue(numInput.value)">

    <br><br><br>
    <span>Formatted Value:</span>
    <div>{{formattedValue}}</div>
  `,
})
export class App {
  name = 'Angular';
  value?: number = null;
  formattedValue: string = '';

  syncValue(rawValue: string) {
    this.formattedValue = rawValue;
    // 此处可将rawValue作为持久化的目标值
  }
}

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