Why do i see [object Object] inside my input?

user_9979012 0
Viewed 625

I can't understand why instead of a placeholder inside my input I see [object Object];

Here is my html:

<div class="input-form">
  <input type="text" placeholder="Type name here..." [(ngModel)]="newItem">
  <button (click)="addItem()">Add new</button>
</div>
<ul>
  <li *ngFor="let item of items">{{ item }}
    <button (click)="deleteItem(item)" >Delete</button>
  </li>
</ul>

And here is component.ts:

newItem = {};
items = [];

addItem() {
  if (this.newItem !== null) {
    this.items.push(this.newItem);
    this.newItem = {};
  }
}
angular7 angular typescript javascript
2 Answers

[object Object] is result of toString() function.

const obj = { };
console.log(obj.toString());

result:

[object Object]

You need to pass value of string type, but I highly recommend not to pass value with ngModel at all. You should use FormGroup to create forms.

user_107826200

You should define newItem as string because it refers to binding target value which comes from your input element.

newItem: string;
user_65831400
Related