CODEWITHSUNDEEP
angularapi
Hemanth Kalyan A
Hemanth Kalyan A

Reputation: 137

I'm able to display the data fetched from an API in the input field in Angular 8 with error in the console

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.

Below is the HTML code

 <form [formGroup]="homeForm" class="form-horizontal" (ngSubmit)="continue(homeForm.value)">
                <div class="form-group">
                    <label class="control-label" class="text">Officer Name</label>
                    <input type="text" class="form-control" formControlName="oName" value={{this.home[0].oName}} readonly>
                </div>
                <div class="form-group">
                    <label class="control-label" class="text">Officer ID</label>
                    <input type="text" class="form-control" formControlName="oIDNum" readonly>
                </div>
  div align="end">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>

Below is the ts file 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)=>{
    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']);
  }
 }

This is the service file

  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`);
 }
}

JSON file data I'm using is below

{
 "officer":[ {
"oName": "Example",
"oIDNum": "1"
}]
}

error in console

Upvotes: 2

Views: 2559

Answers (3)

Ramya S
Ramya S

Reputation: 71

You can remove the value in the html

   value={{this.home[0].oName}}

And in the TS file you need to write it like this...

 ngOnInit() {
    this.apiService.getData().subscribe((data)=>{
    this.home = data;

    this.homeForm = new FormGroup({
    oName:new FormControl(this.home[0].oName),
    oIDNum:new FormControl(this.home[0].oIDNum),
    })
  })
 }

Upvotes: 2

Barremian
Barremian

Reputation: 31125

You could remove the subscription from the component and use async pipe in the template.

Also I see some other issues:

  • The property oName is actually contained in the officer array.
  • You might have to enclose the interpolation expression in double quotes.
  • Use safe navigation operator ?. to make sure the variables are defined before trying to access their properties.

Try the following

Controller

export class HomeComponent implements OnInit {
  home$: any;
  ...

  ngOnInit() {
    this.home$ = this.apiService.getData();
  }
}

Template

<ng-container *ngIf="home$ | async as data">
  <input type="text" class="form-control" formControlName="oName" value="{{ data?.officer[0]?.oName }}" readonly>
</ng-container>

Upvotes: 1

Shlok Nangia
Shlok Nangia

Reputation: 2377

In html use 

<input type="text" class="form-control" formControlName="oName" value={{this.home.officer[0].oName}} readonly>

i.e. use value={{this.home.officer[0].oName}} instead of value={{this.home.[0].oName}} as this.home is not an array, it is an object, this.home.officer is array

Upvotes: 0

Related Questions