title: Json data to be represented in formcontrol in angular 5
body: <p>I am trying to bind the Json value which I get from my server to respective textboxes,but when I bind I see the value in textbox as <code>[object object]</code></p>
  
  <pre><code>&lt;h1&gt;{{title}}&lt;/h1&gt; 
      &lt;h3&gt;Catalog&lt;/h3&gt; 
      &lt;hr /&gt;  
  
        &lt;fieldset&gt;
              &lt;legend&gt;About Tool&lt;/legend&gt;
              &lt;form [formGroup]="CatalogForm"  #formDir="ngForm" novalidate&gt; 
                  &lt;div class="form-group row"&gt; 
                  &lt;!-- &lt;div *ngIf="ItemName != null"&gt;&lt;/div&gt;--&gt;
                   &lt;!--&lt;div *ngFor="let c of CatalogForm;let i=index"&gt;&lt;/div&gt;--&gt;
                   &lt;label class="control-label col-md-12"&gt;ItemName&lt;/label&gt;
                   &lt;div class="col-md-4"&gt;&lt;/div&gt;
                    &lt;input class="form-control" readonly="true" type="text" formControlName="Category"  &gt;
  
                    &lt;pre&gt;{{CatalogForm.value.Category | json }}&lt;/pre&gt;
                &lt;/div&gt;
                 &lt;br /&gt;&lt;br/&gt;
           &lt;/form&gt;
     &lt;/form&gt;
  
  and my component code is 
  
  
   import { Component, OnInit } from '@angular/core';
      import { Http, Headers } from '@angular/http';  
      import { FormsModule,NgForm, FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';  
      import { Router, ActivatedRoute } from '@angular/router';  
      import { CatalogComponent } from '../catalog/catalog.component';  
      import { CatalogService } from '../services/Catalog.service';  
      import { ContactService } from '../services/Contact.service';
      import { URLService } from '../services/URL.service';
      import { SupportService } from '../services/Support.service';
      import { Catalog } from '../classes/Catalog';
      import { Contact } from '../classes/Contact';
      import { URL } from '../classes/URL';
      import { Support } from '../classes/Support';
      import { Category } from '../classes/Category';
  
  
    @Component({
    selector: 'app-catalog-form',
    templateUrl: './catalog-form.component.html',
    styleUrls: ['./catalog-form.component.scss']
  })
  export class CatalogFormComponent implements OnInit {
    Catalogdata:Catalog;
    Contacts:Contact[];
    URLs:URL[];
    Supportdata:Support[];
    CatalogForm:FormGroup;
    title: string = "";  
    id: number;  
    errorMessage: any;  
    constructor( private _fb: FormBuilder,private _avRoute: ActivatedRoute,  
      private catService: CatalogService,private conservice:ContactService,
      private urlservice:URLService,private supservice:SupportService, private _router: Router) {
        if (this._avRoute.snapshot.params["id"]) {  
          this.id = this._avRoute.snapshot.params["id"]; 
       }
       this.CatalogForm = this._fb.group({ 
  
        Category: [''],
        SubCategory:[''],
        ItemName:[''],
        Description:[''],
        IAP_Number:[''],
        /*ToolOwner:[''],
        BusinessOwner:[''],
        ProdURL:[''],
        IncidentURL:[''],
        RequestURL:[''],
        SupportType:[''],
        SupportValue:[''],
        SupportLink:['']*/
        }) 
      }
  
    ngOnInit() {
      console.log("I am in form component",this.id);
      if (this.id &gt; 0) {  
        this.title = "View"; 
        console.log("Title of form:",this.title) ;
        this.catService.getCatalogDetails(this.id)  
        .subscribe( t =&gt; 
          this.CatalogForm.patchValue
          ({Category:t,SubCategory:t,Description:t,ItemName:t,IAP_Number:t}) , err =&gt; 
            console.log("Error messgae:",this.errorMessage)
          );
      }
      console.log("Catalog and Category Details:",this.CatalogForm);
      //.controls.Category.
      //get(['cItem']));
    }
  
    cancel() {  
      this._router.navigate(['/home']);  
  }
  //get ItemName()  {return  this.CatalogForm.get('Category').value; }
  }
  </code></pre>
  
  <p>The <code>&lt;pre&gt;{{CatalogForm.value.Category | json }}&lt;/pre&gt;</code> 
  gives me below data in JSON</p>
  
  <pre><code>[
    {
      "cats": {
        "category_Id": 3,
        "category_Name": "abc",
        "sub_Category": "mmm"
      },
      "cItem": {
        "catalog_Item_Id": 1,
        "category_Id": 3,
        "item_Name": "hsdd",
        "description": "sadss",
  
        "popularity_Flag": true,
        "iaP_No": null,
        "categoryID": {
          "category_Id": 3,
          "category_Name": "sds",
          "sub_Category": "sad"
        }
      }
    }
  ]
  </code></pre>
  
  <p>My problem is how to show the category_Name valuein a textbox.Here the json has <code>category_name</code> as abc and I want to bind that value to category_name textbox as its value. can you take a look?</p>