14

I have updated my Angular 11 project using primeng controls to Angular 12. Once done, the primeng pKeyFilter throws an error everywhere it is used. Creating a new Angular 12 project from scratch does not have this problem. Everything else appears to work fine after the upgrade. Any thoughts?

Here is the component

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-key',
  templateUrl: './key.component.html',
  styleUrls: ['./key.component.scss']
})
export class KeyComponent implements OnInit {
  public myvalue: string = '';

  constructor() { }

  ngOnInit(): void {
  }

}

Here is the HTML

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

<p>
  <span>{{myvalue}}</span>
</p>

Here is the full error

Error: src/app/modules/nourishment/pages/test/key/key.component.html:1:23 - error NG8007: The property and event halves of the two-way binding 'ngModel' are not bound to the same target. Find more at https://angular.io/guide/two-way-binding#how-two-way-binding-works

1 <input type="text" [(ngModel)]="myvalue" pKeyFilter="int"/> ~~~~~~~

node_modules/@angular/forms/forms.d.ts:3297:22 3297 export declare class NgModel extends NgControl implements OnChanges, OnDestroy { ~~~~~~~ The property half of the binding is to the 'NgModel' component.

node_modules/primeng/keyfilter/keyfilter.d.ts:6:22 6 export declare class KeyFilter implements Validator { ~~~~~~~~~ The event half of the binding is to the 'KeyFilter' component.

src/app/modules/nourishment/pages/test/key/key.component.ts:5:16 5 templateUrl: './key.component.html', ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component KeyComponent.

I understand the basics behind the error but I can't figure out what is triggering it. I have primes InputModule and KeyFilterModule imported as well as FormsModule in the parent module. Again, this was all working prior to the upgrade. https://www.primefaces.org/primeng/showcase/#/keyfilter

Chase
  • 141
  • 1
  • 1
  • 4
  • I have the same problem and I think is an incompatibility between pKeyFilter and ngModel on primeng v11.4.0+ (in 11.4.5 appears even doesn't work) ... any way It seems to be an error but functionallity appears still working ... (I'm using Angular 11) – rolivares Aug 16 '21 at 08:03

6 Answers6

11

I just changed the order of [(ngModel)] in first and [pKeyFilter] in last

from :

<input type="text"  pInputText [pKeyFilter]="'money'" [(ngModel)]="tare" >

To:

<input type="text"  pInputText  [(ngModel)]="tare" [pKeyFilter]="'money'" >

its working good

AissaDevLab
  • 584
  • 5
  • 9
3

In my case I tried to two way databind a custom property, but to allow that i had to add a event.

@Input() value: unknown
@Output() valueChange = new EventEmitter<unknown>();
Peter
  • 37,042
  • 39
  • 142
  • 198
2

When I turned on Angular's:

angularCompilerOptions: strictTemplates

I also get this error.

Try:

[pKeyFilter]="'int'"

It's working for me

I use

"@angular/core": "^12.2.0", // etc...
"primeng": "^12.0.1",
Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
Mark van de Kerkhof
  • 21
  • 1
1

I opened a new issue to fix this:

https://github.com/primefaces/primeng/issues/10524

user1720260
  • 31
  • 3
1

Had to change

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

to

<input type="text" pInputText [(ngModel)]="myvalue" [pKeyFilter]="'int'"/>
SergiySev
  • 395
  • 3
  • 8
0

I had to change 2 things: pKeyFilter="int" to [pKeyFilter]="'int'" AND had to move pKeyFilter to be before ngModel

Please don't ask why it works, just go with it...

️

PhillipJacobs
  • 2,337
  • 1
  • 16
  • 32