Angular16下PrimeNG自定义数字输入组件传值异常的修复需求

问题根源是PrimeNG的p-inputNumber在Angular升级后，触发的变更事件参数是包含formattedValue、originalEvent、value的对象，你的自定义组件之前没有正确提取其中的value字段，导致表单控件绑定了整个事件对象而非纯数值。只需修改自定义组件的事件处理逻辑即可解决：

步骤1：调整模板中的事件绑定 #

在自定义组件的模板里，使用PrimeNG专门的onValueChange事件替代原生change事件，确保获取到规范的参数结构：

<!-- 自定义组件模板 -->
<p-inputNumber
  [(ngModel)]="innerValue"
  (onValueChange)="handleValueChange($event)"
  <!-- 保留你原有其他配置属性 -->
></p-inputNumber>

步骤2：修改组件类的值传递逻辑 #

在组件类中，从事件对象里提取纯value，再通过ControlValueAccessor的回调传递给表单控件：

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

@Component({
  selector: 'app-custom-number-input',
  templateUrl: './custom-number-input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomNumberInputComponent),
      multi: true
    }
  ]
})
export class CustomNumberInputComponent implements ControlValueAccessor {
  innerValue: number | null = null;
  onChange: (value: number | null) => void = () => {};
  onTouched: () => void = () => {};

  writeValue(value: number | null): void {
    this.innerValue = value;
  }

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

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

  handleValueChange(event: { value: number | null }): void {
    this.innerValue = event.value;
    // 仅传递纯数值给表单控件
    this.onChange(event.value);
    this.onTouched();
  }
}

核心说明 #

• 用onValueChange事件能避免原生事件的参数混乱，直接拿到PrimeNG封装好的包含value的结构；
• 严格提取event.value传递给onChange回调，确保表单控件绑定的始终是纯数字；
• 原有writeValue逻辑保持不变，不影响表单初始值的同步。

修改完成后，所有使用该自定义组件的表单字段，提交时都会传递纯数值而非对象，无需改动项目其他代码。

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