PrimeNG InputNumber组件只读（readonly）属性无法生效的问题求助

我之前也踩过PrimeNG InputNumber设置readonly没效果的坑，试了好几种方法，下面给你几个靠谱的解决方案：

• 改用disabled属性（快速生效，但有表单提交限制）
  如果只是单纯想阻止用户编辑输入框，直接用[disabled]="true"是最直接的，这个属性在PrimeNG组件里是完全生效的：

  <p-inputNumber [disabled]="true" [(ngModel)]="yourValue"></p-inputNumber>
  

  注意：disabled状态的输入框值不会被表单提交，如果需要提交这个值的话，这个方法就不适用了。

• 绑定原生HTML的readonly属性
  PrimeNG的InputNumber底层是基于原生input元素实现的，所以我们可以直接给它绑定原生的readonly属性，用[attr.readonly]="true"的方式：

  <p-inputNumber [attr.readonly]="true" [(ngModel)]="yourValue"></p-inputNumber>
  

  这种方式既可以阻止编辑，又不会影响表单提交，输入框也不会变灰，完美符合readonly的预期效果。

• 监听输入事件阻止编辑行为
  如果上面两种方法都不适用（比如某些特殊版本的组件），可以通过监听输入事件来强制阻止编辑：

  <p-inputNumber (onInput)="$event.preventDefault()" [(ngModel)]="yourValue"></p-inputNumber>
  

  或者在组件类里定义方法：

  stopEditing(event: Event): void {
    event.preventDefault();
  }
  

  然后模板里调用：

  <p-inputNumber (onInput)="stopEditing($event)" [(ngModel)]="yourValue"></p-inputNumber>
  

• 升级PrimeNG版本（根源解决）
  如果你用的是比较旧的PrimeNG版本，可能是组件本身对readonly属性的支持有bug，尝试升级到最新稳定版，官方可能已经修复了这个问题。

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