Json data to be represented in formcontrol in angular 5 - html

Question

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 [object object]
<h1>{{title}}</h1>
<h3>Catalog</h3>
<hr />
<fieldset>
<legend>About Tool</legend>
<form [formGroup]="CatalogForm" #formDir="ngForm" novalidate>
<div class="form-group row">
<!-- <div *ngIf="ItemName != null"></div>-->
<!--<div *ngFor="let c of CatalogForm;let i=index"></div>-->
<label class="control-label col-md-12">ItemName</label>
<div class="col-md-4"></div>
<input class="form-control" readonly="true" type="text" formControlName="Category" >
<pre>{{CatalogForm.value.Category | json }}</pre>
</div>
<br /><br/>
</form>
</form>
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 > 0) {
this.title = "View";
console.log("Title of form:",this.title) ;
this.catService.getCatalogDetails(this.id)
.subscribe( t =>
this.CatalogForm.patchValue
({Category:t,SubCategory:t,Description:t,ItemName:t,IAP_Number:t}) , err =>
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; }
}
The <pre>{{CatalogForm.value.Category | json }}</pre>
gives me below data in JSON
[
{
"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"
}
}
}
]
My problem is how to show the category_Name valuein a textbox.Here the json has category_name as abc and I want to bind that value to category_name textbox as its value. can you take a look?

Answer 1

Try:
<input
class="form-control"
readonly="true"
type="text"
formControlName="Category"
[ngModel]="CatalogForm.value.Category[0].cats.category_Name">
Use [(ngModel)] for 2 way binding