Angular 6 - Issue with ngModel displaying [object Object] instead of data in binding

Question

Angular 6 - Issue with ngModel displaying [object Object] instead of data in binding

Within my code, there is a variable named "data" that holds the following information:

{
id: 1,
date: "2018-03-13T16:18:03",
date_gmt: "2018-03-13T16:18:03",
guid: {},
modified: "2018-05-03T17:25:36",
modified_gmt: "2018-05-03T17:25:36",
slug: "hello-world",
status: "publish",
type: "post",
title: {
rendered: "Hello world!"
},

When I output the id in app.component.html using the following syntax, it works perfectly:

[ngModel]="data?.id"

However, I encounter an issue when trying to display the title.

Using the code below results in seeing [object Object]:

[ngModel]="data?.title.rendered"

But using this alternative code successfully displays the title:

value="{{data?.title.rendered}}"

How can I make

[ngModel]="data?.title.rendered" show the title instead of [object Object] ?

angular typescript angular6

Answer 1

Answer №1

This StackBlitz example was created by me.

Here is the code snippet for the component:

export class AppComponent {

  data = {
    id: 1,
    date: "2018-03-13T16:18:03",
    date_gmt: "2018-03-13T16:18:03",
    guid: {},
    modified: "2018-05-03T17:25:36",
    modified_gmt: "2018-05-03T17:25:36",
    slug: "hello-world",
    status: "publish",
    type: "post",
    title: {
      rendered: "Hello world!"
    }
  }

  myForm:FormGroup;
  constructor(private formBuilder: FormBuilder) {
        this.myForm = this.formBuilder.group({
            "title": ['', Validators.required]
        });      
    }
}

In the HTML template:

<form [formGroup]="myForm" >  
    <input type="text" class="form-control m-input" formControlName="title" name="title" id="title-field" placeholder="Title" [(ngModel)]="data?.title.rendered">
</form>

Answer 2

This StackBlitz example was created by me.

Here is the code snippet for the component:

export class AppComponent {

  data = {
    id: 1,
    date: "2018-03-13T16:18:03",
    date_gmt: "2018-03-13T16:18:03",
    guid: {},
    modified: "2018-05-03T17:25:36",
    modified_gmt: "2018-05-03T17:25:36",
    slug: "hello-world",
    status: "publish",
    type: "post",
    title: {
      rendered: "Hello world!"
    }
  }

  myForm:FormGroup;
  constructor(private formBuilder: FormBuilder) {
        this.myForm = this.formBuilder.group({
            "title": ['', Validators.required]
        });      
    }
}

In the HTML template:

<form [formGroup]="myForm" >  
    <input type="text" class="form-control m-input" formControlName="title" name="title" id="title-field" placeholder="Title" [(ngModel)]="data?.title.rendered">
</form>

Angular 6 - Issue with ngModel displaying [object Object] instead of data in binding

Answer №1

Similar questions

Creating a Chrome extension with Angular 5: A comprehensive guide

Repeatedly calling the subscription results in the dialogue opening twice due to the state mutation with Ngrx in Angular

What is the best way to transfer an array of objects between two components in React?

Issue with event.stopPropagation() in Angular 6 directive when using a template-driven form that already takes event.data

Creating an Increment and Decrement Button for Products in Angular and Ionic 3

How to implement div scrolling on button click using Angular 4

Attempting to perform an API invocation on a distant endpoint utilizing NestJS

Displaying buttons based on the existence of a token in Angular - A guide

What is the reason that {a: never} is not the same as never?

Is Jasmine brushing off TypeScript test files?

What is the process of sending a return value back to a component through the subscribe method in a

React Native: Dynamic Rendering based on Conditions

When I pass an array of objects to Firefox (using TypeScript) and retrieve the data, I find that I am unable to retrieve it in the form of an array of objects

Integrating Google Analytics into an Angular 16 application without using app.module

Ways to boost performance in an Angular 6.0 application

Error message in Angular 2: Unable to locate node module for import

Encountering a Windows 11 issue: npm ERR! errno -4058 with ENOENT bash code

Protector of the young travelers' paths

execute a JAR file on a Windows Server

Why do referees attempt to access fields directly instead of using getters and setters?