Angular响应式表单中0.0被转为0的验证需求处理

我们用Angular的FormControl实现了一个type="number"的输入字段（没法修改这个类型），代码如下：

<input #num type="number" formControlName="number" />

当用户输入0.0时，响应式表单会把它识别成数字0，但我们希望能读取到0.0（字符串格式），并基于这个值做验证。

因为type="number"的输入框会被浏览器自动转成数字类型，0.0作为数字和0是等价的，所以要保留输入的小数格式，得绕开默认的数字转换逻辑，把值以字符串形式处理。

方案1：监听输入事件手动赋值 #

在模板里加input事件监听，直接拿输入框的原始文本赋值给表单控件：

<input #num type="number" formControlName="number" (input)="onNumberInput(num.value)" />

组件类里写处理函数：

onNumberInput(rawValue: string) {
  // 把原始输入字符串直接传给表单控件，emitEvent设为false避免循环触发值变更
  this.form.get('number')?.patchValue(rawValue, { emitEvent: false });
}

方案2：自定义表单控件（复用性强） #

如果多个地方需要这个功能，可以自定义一个实现ControlValueAccessor的组件，接管值的读写逻辑：

1. 新建组件：

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

@Component({
  selector: 'app-number-input',
  template: `<input type="number" [(ngModel)]="innerValue" (input)="onInputChange()" />`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => NumberInputComponent),
      multi: true
    }
  ]
})
export class NumberInputComponent implements ControlValueAccessor {
  innerValue: string = '';
  onChange: (value: string) => void = () => {};
  onTouched: () => void = () => {};

  writeValue(value: any): void {
    this.innerValue = value?.toString() || '';
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

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

  onInputChange(): void {
    this.onChange(this.innerValue);
    this.onTouched();
  }
}

2. 模板里用这个自定义组件：

<app-number-input formControlName="number"></app-number-input>

方案3：仅验证时获取原始输入 #

如果不需要改表单存储的值，只是验证时要用到0.0，可以通过模板引用变量拿输入框的原始值：

<input #num type="number" formControlName="number" />

组件类里实现自定义验证器：

import { ViewChild } from '@angular/core';
import { AbstractControl, ValidationErrors } from '@angular/forms';

// 获取输入框的模板引用
@ViewChild('num') numInput!: HTMLInputElement;

// 自定义验证逻辑
customValidator(control: AbstractControl): ValidationErrors | null {
  const rawInput = this.numInput.value;
  if (rawInput === '0.0') {
    // 这里写你的验证规则，比如返回错误标记
    return { isZeroDotZero: true };
  }
  return null;
}

// 初始化表单时添加验证器
this.form = this.fb.group({
  number: ['', [this.customValidator.bind(this)]]
});

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