CODEWITHSUNDEEP
angularprimeng
Chase
Chase

Reputation: 151

pKeyFIlter: NG8007: The property and event halves of the two-way binding 'ngModel' are not bound to the same target

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

Upvotes: 15

Views: 26063

Answers (6)

PhillipJacobs
PhillipJacobs

Reputation: 2490

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...

🕷️

Upvotes: 0

SergiySev
SergiySev

Reputation: 403

Had to change

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

to

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

Upvotes: 2

Peter
Peter

Reputation: 38495

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>();

Upvotes: 6

AissaDevLab
AissaDevLab

Reputation: 784

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

Upvotes: 15

Mark van de Kerkhof
Mark van de Kerkhof

Reputation: 21

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",

Upvotes: 2

user1720260
user1720260

Reputation: 31

I opened a new issue to fix this:

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

Upvotes: 1

Related Questions