title: I'm able to display the data fetched from an API in the input field in Angular 8 with error in the console
body: <p>I'm using an reactive form where i'm fetching data from the api and displaying in the html in the input field but i'm getting some error in the console. Need help in solving.</p>
  
  <p>Below is the HTML code</p>
  
  <pre><code> &lt;form [formGroup]="homeForm" class="form-horizontal" (ngSubmit)="continue(homeForm.value)"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label" class="text"&gt;Officer Name&lt;/label&gt;
                      &lt;input type="text" class="form-control" formControlName="oName" value={{this.home[0].oName}} readonly&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label class="control-label" class="text"&gt;Officer ID&lt;/label&gt;
                      &lt;input type="text" class="form-control" formControlName="oIDNum" readonly&gt;
                  &lt;/div&gt;
    div align="end"&gt;
                      &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
  </code></pre>
  
  <p>Below is the ts file code </p>
  
  <pre><code>   import { Component, OnInit } from '@angular/core';
     import { FormControl, FormGroup } from '@angular/forms';
  
     import{Router} from '@angular/router';
     import { ApiService } from '../app.service';
  
  
     @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.css']
   })
   export class HomeComponent implements OnInit {
  
    home:any
  
    constructor(private route:Router,private apiService:ApiService) { }
  
    ngOnInit() {
      this.apiService.getData().subscribe((data)=&gt;{
      this.home = data;
      console.log(this.home);
      })
  
    }
   homeForm = new FormGroup({
     oName:new FormControl(''),
     oIDNum:new FormControl(''),
     })
   continue(value){
    console.log(value);
    this.route.navigate(['/form']);
    }
   }
  </code></pre>
  
  <p>This is the service file</p>
  
  <pre><code>  import { Injectable } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
  
    @Injectable({
    providedIn: 'root'
    })
   export class ApiService {
  
   constructor(private httpClient: HttpClient) { }
   public getData(){
    return this.httpClient.get(`http://localhost:3000/officer`);
   }
  }
  </code></pre>
  
  <p>JSON file data I'm using is below</p>
  
  <pre><code>{
   "officer":[ {
  "oName": "Example",
  "oIDNum": "1"
  }]
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/eo4nU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eo4nU.png" alt="error in console"></a></p>