Angular自定义输入组件配合ReactiveForm取值返回字符串而非数字

Angular响应式表单针对原生input元素的值访问器（ValueAccessor）是编译阶段静态匹配的：

• 当你在模板里硬编码写type="number"时，Angular编译器能直接识别到这是数字输入框，会自动挂载NumberValueAccessor，这个访问器会在输入时自动把输入值从字符串转为数字类型再同步给表单。
• 你当前自定义组件里对原生input用的是动态属性绑定[type]="type"，编译阶段Angular无法确定这个input最终的type值，只会默认挂载处理文本输入的DefaultValueAccessor，这个访问器不会做类型转换，会直接把DOM节点的字符串值同步给表单，所以哪怕运行时把type设为number，拿到的表单值依然是字符串。

方案1：自定义组件实现ControlValueAccessor（推荐） #

让自定义组件本身实现响应式表单的ControlValueAccessor接口，在内部根据type类型主动做值转换，这是最规范、适配性最好的方案，支持type动态切换：

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

export type InputType = 'text' | 'password' | 'number';

@Component({
  selector: 'custom-input',
  template: `<input [type]="type" [value]="value" (input)="handleInput($event)" (blur)="handleTouched()">`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true
    }
  ]
})
export class InputComponent implements ControlValueAccessor {
  @Input() type: InputType = 'text';
  value: string | number = '';

  private onChange = (val: string | number | null) => {};
  private onTouched = () => {};

  handleInput(event: Event) {
    const rawValue = (event.target as HTMLInputElement).value;
    // 数字类型主动做转换，空值转null避免NaN问题
    const finalValue = this.type === 'number' 
      ? rawValue === '' ? null : Number(rawValue)
      : rawValue;
    this.value = finalValue;
    this.onChange(finalValue);
  }

  handleTouched() {
    this.onTouched();
  }

  writeValue(val: string | number | null): void {
    this.value = val ?? '';
  }

  registerOnChange(fn: (val: string | number | null) => void): void {
    this.onChange = fn;
  }

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

方案2：分分支静态渲染input #

如果你的自定义组件是通过@Input()直接透传FormControl/formControlName给内部原生input，可以用*ngIf根据type值分别渲染静态指定type的input节点，让Angular编译器能静态识别到number类型输入框，自动挂载对应的值访问器，无需手动写完整CVA逻辑：

<ng-container [ngSwitch]="type">
  <input *ngSwitchCase="'number'" type="number" ngDefaultControl>
  <input *ngSwitchDefault [type]="type" ngDefaultControl>
</ng-container>

这种方式实现简单，但如果后续要加更多type类型（比如email、search），需要逐个加匹配分支。

方案3：取值层手动转换 #

如果不想修改组件逻辑，可以在获取表单值的业务代码里，针对需要数字类型的字段手动调用Number()做转换。这种方案维护成本高，字段多或者表单结构复杂时容易遗漏转换逻辑，不推荐在中大型项目使用。

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