PrimeNG p-inputNumber组件无法交互（看似禁用）问题求助

大伙好，我最近在项目里用PrimeNG的p-inputNumber组件时碰到了个闹心的问题，想请各位大佬帮忙分析下：

问题详情 #

我想在表单里使用<p-inputNumber>组件，现在组件能正常渲染出来，但完全没法交互——既不能选中输入框、输入内容，也没法获取焦点。我试过调整组件的各种配置参数，甚至单独新建了一个只包含这个表单和输入框的测试组件，结果还是一样。

特别奇怪的是，我代码里根本没设置禁用这个输入框（甚至特意写了[disabled]="false"），换成<input pInputText>组件就能正常工作，可我业务上确实需要用p-inputNumber来处理数字输入。

相关代码 #

模板文件（form.component.html） #

<form [formGroup]="myForm" class="mb-4">
  <div class="row col-md-12">
    <div class="col-sm-12 col-md-6">
      <p-inputNumber 
        id="attribute-quantity-input" 
        class="form-control" 
        formControlName="quantity" 
        placeholder="required" 
        [maxFractionDigits]="2" 
        [minFractionDigits]="2" 
        [disabled]="false">
      </p-inputNumber>
    </div>
  </div>
</form>

模块文件（FormModule） #

import { ButtonModule } from "primeng/button";
import { DropdownModule } from "primeng/dropdown";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { InputTextModule } from "primeng/inputtext";
import { InputNumberModule } from "primeng/inputnumber";
import { MultiSelectModule } from "primeng/multiselect";
import { NgForOf } from "@angular/common";
import { NgModule } from "@angular/core";
import { TooltipModule } from "primeng/tooltip";
import { FormComponent } from "./form.component";

@NgModule({
  imports: [
    ButtonModule, 
    TooltipModule, 
    FormsModule, 
    InputTextModule, 
    DropdownModule, 
    MultiSelectModule, 
    ReactiveFormsModule, 
    BaseFormWrapperModule, 
    NgForOf, 
    InputNumberModule 
  ],
  declarations: [FormComponent],
  exports: [FormComponent]
})
export class FormModule { }

组件文件（FormComponent） #

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormControl, FormGroup, Validators } from "@angular/forms";
import { CONSTANTS } from "../../../../shared/constants";
import { FormUtils, NumberUtils } from "../../../../utils/utils";
import { FormValidator } from "../../../../shared/custom-validators/form.validators";
import { LabelService } from "../../../../administration/label-management/label.service";
import { PickingUnit } from "../picking-units.model";
import { ScfToastrService } from "scf-library";
import { UOM } from "../../../../catalog/uom/uom";
import { UOMService } from "../../../../catalog/uom/uom.service";
import { WepError } from "../../../../shared/wep-error";

@Component({
  selector: "app-form",
  templateUrl: "form.component.html"
})
export class FormComponent implements OnInit {
  private readonly MINIMUM_QUANTITY: number = 1;
  private readonly MAXIMUM_QUANTITY: number = 1_000;
  protected myForm: FormGroup;
  private shipmentOrderId: number;
  protected uomSelector: UOM[];
  protected wip: boolean;

  constructor(
    private formBuilder: FormBuilder,
  ) { 
    this.initData();
  }

  ngOnInit(): void {
    this.initFormBuilder();
  }

  private initFormBuilder(): void {
    this.myForm = this.formBuilder.group({
      quantity: new FormControl(null, [
        Validators.required,
        Validators.min(this.MINIMUM_QUANTITY),
        Validators.max(this.MAXIMUM_QUANTITY)
      ])
    });
  }

  private initData(): void {
    // 初始化数据的逻辑，原代码未实现具体内容
  }
}

依赖版本 #

{
  "dependencies": {
    "primeflex": "^3.2.1",
    "primeicons": "^5.0.0",
    "primeng": "^15.4.1"
  }
}

DOM渲染结果 #

我查看了页面的DOM结构，组件渲染出来的代码如下：

<p-inputnumber id="attribute-quantity-input" formcontrolname="quantity" class="p-element p-inputwrapper form-control ng-untouched ng-pristine ng-invalid" ng-reflect-name="quantity" ng-reflect-placeholder="Requerido" ng-reflect-max-fraction-digits="2" ng-reflect-min-fraction-digits="2" ng-reflect-disabled="false" ng-reflect-is-disabled="false">
  <span ng-reflect-ng-class="[object Object]" class="p-inputnumber p-component">
    <input pinputtext="" inputmode="decimal" class="p-inputtext p-component p-element p-inputnumber-input" ng-reflect-ng-class="p-inputnumber-input" placeholder="required">
    <!--bindings={ "ng-reflect-ng-if": "false" }-->
    <!--bindings={ "ng-reflect-ng-if": "false" }-->
    <!--bindings={ "ng-reflect-ng-if": "false" }-->
    <!--bindings={ "ng-reflect-ng-if": "false" }-->
  </span>
</p-inputnumber>

我已经排查过的点：

• 确认没有在全局样式或组件样式中给该组件添加pointer-events: none属性
• 检查了表单和组件的状态，没有被意外禁用
• 试过移除自定义验证器、调整表单初始化逻辑，问题依然存在

有没有朋友碰到过类似的问题？或者能给我一些排查方向？

内容来源于stack exchange