升级Angular12后primeng pKeyFilter报NG8007:ngModel双向绑定错误

问题原因 #

Angular 12强化了模板双向绑定的合法性校验，会校验[(x)]语法对应的x输入属性和xChange输出事件是否归属同一指令/组件。你当前项目中安装的PrimeNG版本未适配Angular 12，旧版本KeyFilter指令错误声明了ngModelChange输出事件，和Angular原生NgModel指令的ngModelChange冲突，导致Angular无法识别双向绑定的归属目标，抛出NG8007错误。
从零新建的Angular 12项目默认会安装适配对应版本的PrimeNG，官方已在适配版本中修复了该命名冲突问题，因此无报错。

解决方案 #

• 优先升级PrimeNG到适配Angular 12的12.x最新版本，即可直接解决指令事件命名冲突问题。
• 若暂时无法升级依赖，可将双向绑定语法拆分为分开的属性绑定和事件绑定，绕过Angular的绑定校验：

<input type="text" pInputText [ngModel]="myvalue" (ngModelChange)="myvalue = $event" pKeyFilter="int"/>

• 临时兼容方案可修改angular.json配置，关闭模板严格校验，不推荐长期使用：

{
  "angularCompilerOptions": {
    "strictTemplates": false
  }
}

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