Search code examples
angulartypescriptangular-reactive-forms

The property and event halves of the two way binding are not bound at the same target


I want to make a two way binding with reactive forms in Angular. I want to transfer the data from the child component to the parent component and back.

My child component HTML:

<input type="text" #name class="form-control"
            (keydown)="oss.test(); addNewItem(name.value)"  formControlName="name">

My child component TypeScript:

  @Input()  namex: string=  "";
  @Output() additem = new EventEmitter<string>();

The parent component HTML:

 <app-general [(count)]="count" [(namex)]="currentItem" (value)="this.generalInformation=$event; this.print()"
              (isValid)="this.generalInformationIsValid=$event">
            </app-general>

The parent component TypeScript:

currentItem: string = "";

I get following error message:

The property and event halves of the two-way binding 'namex' are not bound to the same target.
            Find more at https://angular.io/guide/two-way-binding#how-two-way-binding-works

Can someone please help me why I get this error?

I want to get the data from the child component to the parent component and back.


Solution

  • you have @Input() namex: string = ""; without @Output() namexChange = new EventEmitter(), try adding the namexChange event