How do I fix this post request in Angular

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {HttpClient} from '@angular/common/http';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {MatDialog} from '@angular/material/dialog';
import {ConfirmDialogComponent, ConfirmDialogModel} from '../confirm-dialog/confirm dialog.component';
const BASE_URL = 'http://localhost:3000/';

@Component({
  selector: 'app-edit-chemical',
  templateUrl: './edit-chemical.component.html',
  styleUrls: ['./edit-chemical.component.css']
})
export class EditChemicalComponent implements OnInit {
  chemical_name: FormGroup;
  common_name: FormGroup;
  signal_word: FormGroup;
  chemical_solid_quantity: FormGroup;
  chemical_liquid_quantity: FormGroup;
  whmis_class: FormGroup;
  primary_hazard_class: FormGroup;
  secondary_hazard_class: FormGroup;
  category: FormGroup;
  staff_member_id: FormGroup;
  room_id: FormGroup;
  sds_id: FormGroup;

  id: string;
  private http: HttpClient;
  chemical: any;
  isLinear = true;

  firstFormGroup: FormGroup;
  secondFormGroup: FormGroup;

  result: string;



  constructor(private httpValue: HttpClient, private route: ActivatedRoute, private formBuilder: FormBuilder, public dialog: MatDialog, private router: Router) {
    this.http = httpValue;
  }

  ngOnInit(): void {
    this.id = this.route.snapshot.paramMap.get('id');

    this.getChemical();
    

    this.firstFormGroup = this.formBuilder.group({
      chemical_name: [this.chemical.chemical_name, Validators.required], //PROBLEM HERE
      common_name: [''],
      chemical_solid_quantity: ['0.00', Validators.required],
      chemical_liquid_quantity: ['0.00', Validators.required],
      whmis_class: ['', Validators.required],
      primary_hazard_class: ['', Validators.required],
      secondary_hazard_class: [''],
      category: ['', Validators.required],
      signal_word: ['', Validators.required],
      staff_member_id: ['', Validators.required],
      room_id: ['', Validators.required],
      sds_id: ['', Validators.required],


    });
    this.secondFormGroup = this.formBuilder.group({
      chemical_solid_quantity: ['', Validators.required],
      chemical_liquid_quantity: ['', Validators.required],
    });
  }
  getChemical(): void {
    this.http.post(BASE_URL + 'SingleChemical',
      {
        chemical_id:   this.id,
      })
      .subscribe(
        (data) => {
          this.chemical = data;
          this.chemical = this.chemical.chemical[0];
          console.log(this.chemical.chemical_name); //this works fine
        },
        error => {
          // this._errorMessage = 'Connection Issue';
        });
  }


}

The this.chemical.chemical_name works fine in console so I do receive the response but it is not defined when setting it in this.firstFormGroup

Is there a way I can return or halt the next funtion until getChemicals() is completed. I removed parts of the code that had no relevance to the issue. The goal is to prefill the form with existing data to make it easier to edit.