How to get data from database and use setValue or patchValue

Question

How to fetch data from the database and set the data from the database into an input box

Following is a piece of my code

get service

getStudentAddress() {
 const id = sessionStorage.getItem('userId');
 return this.http.get('http://localhost:8080' + '/student/' + id);
}

The getStudentAddress() that will return an array of the student data something like this

in my component, how can I get the data and put it on an input box that will display the data automatically when the page is open

ngOnInit() {

 // Here should the display is from the database by using setValue or patchValue
 this.studentForm.setValue({
  s_pNumber: '1234',
  s_address: '123',
  s_address2: '123',
  s_pCode: '123',
  s_city: '123',
  s_state: '123',
  s_country: '123'
});

Answer 1

You should return the observable value by subscribing to the API call, then use patchValue to assign the, to your reactive form. I am assuming that your FormControl names are the same as the properties in that object. On your component.ts,

constructor(private crudService: crudService) { }

ngOnInit() {
  this.crudService.getStudentAddress().subscribe((response: any) => {
    this.studentForm.patchValue(response.data);
  });   
}

For more details on setting values to your FormControl, you may refer to this other answer of mine.