Angular 5中如何在视图保留格式、模型存储普通数字？

你当前遇到的问题，核心是没有正确分离视图展示值和模型存储值的转换逻辑——当用户输入修改后，带格式的字符串直接同步到了模型里。解决这个问题的关键是实现Angular的ControlValueAccessor接口，它专门用来处理自定义组件与[(ngModel)]之间的数据双向转换。

具体实现步骤 #

我直接给你一套可复用的解决方案，你可以按需调整：

1. 自定义货币输入组件（实现ControlValueAccessor）

创建一个currency-input.component.ts文件：

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'app-currency-input',
  templateUrl: './currency-input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CurrencyInputComponent),
      multi: true
    }
  ]
})
export class CurrencyInputComponent implements ControlValueAccessor {
  // 视图层显示的带格式字符串
  viewValue: string = '';
  // 模型层存储的纯数字
  private modelValue: number | null = null;

  // Angular内部用于同步模型变更的回调
  private onChange: (value: number | null) => void = () => {};
  // Angular内部用于标记组件已被触摸的回调
  private onTouched: () => void = () => {};

  // 从模型到视图：把数字格式化为货币字符串
  writeValue(value: number | null): void {
    this.modelValue = value;
    if (value !== null && value !== undefined) {
      // 这里可以根据需求修改货币类型、地区格式
      this.viewValue = new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY'
      }).format(value);
    } else {
      this.viewValue = '';
    }
  }

  // 注册模型变更回调
  registerOnChange(fn: (value: number | null) => void): void {
    this.onChange = fn;
  }

  // 注册触摸回调
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // 从视图到模型：把用户输入的格式化字符串解析为纯数字
  handleViewChange(inputValue: string): void {
    // 过滤掉所有非数字和小数点的字符
    const cleanedValue = inputValue.replace(/[^0-9.]/g, '');
    // 转换为数字（空值则设为null）
    this.modelValue = cleanedValue ? parseFloat(cleanedValue) : null;
    // 重新格式化视图值，确保显示规范的货币格式
    this.viewValue = this.modelValue !== null
      ? new Intl.NumberFormat('zh-CN', {
          style: 'currency',
          currency: 'CNY'
        }).format(this.modelValue)
      : '';
    // 通知Angular更新模型值
    this.onChange(this.modelValue);
  }
}

2. 组件模板（currency-input.component.html）

<input
  type="text"
  [(ngModel)]="viewValue"
  (ngModelChange)="handleViewChange($event)"
  (blur)="onTouched()"
  placeholder="请输入金额"
/>

3. 在父组件中使用

<!-- 父组件模板 -->
<app-currency-input [(ngModel)]="productPrice"></app-currency-input>
<p>模型中存储的纯数字：{{ productPrice }}</p>

核心逻辑说明 #

• 模型→视图：通过writeValue方法，把模型里的纯数字格式化为带货币符号的字符串，展示在输入框中。
• 视图→模型：用户输入时，先过滤掉所有非数字字符，转换为纯数字后同步到模型，同时重新格式化视图值，避免用户输入的混乱格式留在输入框里。
• 双向绑定兼容：通过注册NG_VALUE_ACCESSOR提供者，让Angular识别这个自定义组件支持[(ngModel)]语法。

这样调整后，你就能实现「视图显示货币格式，模型存储纯数字」的需求，也能解决你提到的「添加零后格式同步到模型」的问题。

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