如何在Angular输入框中设置指定初始显示数值？

1. 修正初始值设置 #

首先在Amount类的构造函数中直接设置默认值，替代原来的null：

export class Amount {
  amount: string;
  valoMin: number | null; 
  valoMax: number | null; 

  constructor() {
    this.amount = '';
    this.valoMax = 9999999999999.99; // 设置最大值初始值
    this.valoMin = 0; // 设置最小值初始值（对应显示.00）
  }

  validateMinMax(): boolean {
    return this.valoMin == null || this.valoMax == null || this.valoMin <= this.valoMax;
  }
}

2. 优化输入框属性 #

在模板的数字输入框中添加step="0.01"，确保输入框支持两位小数精度，同时点击上下箭头时按0.01步进：

<!-- 最小值输入框 -->
<input type="number" class="form-control form-max-width" [(ngModel)]="model.valoMin" name="valoMin" required step="0.01" />

<!-- 最大值输入框 -->
<input type="number" class="form-control form-max-width" [(ngModel)]="model.valoMax" name="valoMax" required step="0.01" />

3. 强制显示两位小数 #

部分浏览器的数字输入框会自动省略末尾的0（比如把0显示为0而非0.00），需要自定义指令来强制初始显示两位小数：

创建自定义指令

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

@Directive({
  selector: '[appTwoDecimalFormat]'
})
export class TwoDecimalFormatDirective implements OnInit {

  constructor(private el: ElementRef<HTMLInputElement>) { }

  ngOnInit(): void {
    const input = this.el.nativeElement;
    // 仅处理数字类型输入框，且值存在时格式化
    if (input.type === 'number' && input.value !== '') {
      const numValue = parseFloat(input.value);
      input.value = numValue.toFixed(2);
    }
  }
}

在模块中声明指令

将该指令添加到对应Angular模块的declarations数组中，确保可以在模板中使用。

在输入框中应用指令

<input type="number" class="form-control form-max-width" [(ngModel)]="model.valoMin" name="valoMin" required step="0.01" appTwoDecimalFormat />
<input type="number" class="form-control form-max-width" [(ngModel)]="model.valoMax" name="valoMax" required step="0.01" appTwoDecimalFormat />

4. 组件逻辑调整 #

在组件的getOverviewTotalAmount方法中，确保返回的数值保持两位小数精度：

getOverviewTotalAmount(): void {
  this.service
    .getOverviewTotalAmount(this.model)
    .pipe(takeUntil(this.unsubscribe$))
    .subscribe((res) => {
      if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
        this.overviewTotalAmountResponse = res as OverviewTotalAmountResponse;
        // 保留两位小数
        this.valoMin = this.model.valoMin !== null ? Number(this.model.valoMin.toFixed(2)) : 0;
        this.valoMax = this.model.valoMax !== null ? Number(this.model.valoMax.toFixed(2)) : 0;
      }
    });
}

这样就能实现最小值输入框初始显示.00，最大值输入框初始显示9999999999999.99的需求，同时保证输入框的数字类型属性和精度控制。

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