Angular 10使用FormGroup实现输入框保留原始值并按规则显示小数位

核心逻辑 #

• FormGroup对应的FormControl始终存储完整的原始数值，不做截断，保证提交时拿到的是全量数据
• 输入框的显示值单独通过焦点事件控制，和FormControl的真实值解耦
• 失焦时将原始值格式化为保留2位小数的字符串展示，聚焦时切换回原始完整值

组件类代码（.ts） #

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

@Component({
  selector: 'app-number-input',
  templateUrl: './number-input.component.html',
  styleUrls: ['./number-input.component.css']
})
export class NumberInputComponent implements OnInit {
  dataForm: FormGroup;
  // 存储输入框当前显示的文本
  inputDisplayValue: string;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    // 初始化FormGroup，number字段默认存null，始终保留完整值
    this.dataForm = this.fb.group({
      number: [null]
    });

    // 监听FormControl值变化，同步初始显示值（默认保留2位小数）
    this.dataForm.get('number').valueChanges.subscribe(val => {
      if (val !== null && val !== undefined) {
        this.inputDisplayValue = Number(val).toFixed(2);
      } else {
        this.inputDisplayValue = '';
      }
    });
  }

  // 输入框聚焦事件：切换为完整原始值
  onInputFocus(): void {
    const rawValue = this.dataForm.get('number').value;
    this.inputDisplayValue = rawValue !== null && rawValue !== undefined ? String(rawValue) : '';
  }

  // 输入框失焦事件：切换为保留2位小数的显示值，同时更新FormControl的真实值
  onInputBlur(): void {
    // 先把输入框当前的输入内容转成数字，更新到FormControl（始终存完整值）
    const inputVal = parseFloat(this.inputDisplayValue);
    if (!isNaN(inputVal)) {
      this.dataForm.get('number').setValue(inputVal);
      // 显示值转成2位小数
      this.inputDisplayValue = inputVal.toFixed(2);
    } else {
      // 非法输入的情况可以按需处理，比如清空
      this.dataForm.get('number').setValue(null);
      this.inputDisplayValue = '';
    }
  }

  // 保存方法，直接取FormGroup的原始值即可，是全量未截断的
  onSave(): void {
    const submitData = this.dataForm.value;
    console.log('提交的完整数值：', submitData.number);
    // 后续调用接口提交逻辑写在这里
  }
}

模板代码（.html） #

<form [formGroup]="dataForm">
  <input 
    type="text" 
    [value]="inputDisplayValue"
    (input)="inputDisplayValue = $event.target.value"
    (focus)="onInputFocus()"
    (blur)="onInputBlur()"
    placeholder="请输入数值"
  >
  <button type="button" (click)="onSave()">保存</button>
</form>

注意事项 #

• 输入框类型用text不要用number，避免浏览器默认的数值格式化干扰自定义逻辑
• toFixed(2)默认会对第三位小数做四舍五入，如果业务要求截断不四舍五入，可以自行调整格式化逻辑
• 示例里的非法输入处理可以根据业务需求调整，比如限制只能输入数字和小数点
• 如果需要多个同类型输入框，可以封装成自定义表单控件，实现ControlValueAccessor接口复用逻辑

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