Variable insertion problem in the Ionic Framework via HTTP methods

Question

Good night,

I am developing an App in Ionic and I want to make available a screen where it is possible for the person to view an already recorded information and can edit it as well. For example: the person registered the student "Peter", however, she verified that the name is "John". When she clicks edit, the code sends her to the next screen where she will have the message "Enter the student’s name" and the value previously inserted appears below, in the case "Pedro". So she can delete the name "Peter", edit, replace, anyway, it’s an update where the old value appears, I don’t know if I could be clear rs. And to do this I was using Reactform, creating a form that would receive the value of an API of mine already ready and would leave them on the screen as I explained above. Follows my code:

import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { RequisicoesApiService } from './../../services/requisicoes-api.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-edicao-cn',
  templateUrl: './edicao-cn.page.html',
  styleUrls: ['./edicao-cn.page.scss'],
})
export class EdicaoCNPage implements OnInit {

  crencaNuclearFormulario: FormGroup;
  crencaNuclear: any;
  id: any;
  constructor(private requisicoesApiService : RequisicoesApiService, 
    private activatedRoute : ActivatedRoute,
    private formBuilder : FormBuilder) {
    this.id = this.activatedRoute.snapshot.paramMap.get('id');

    this.crencaNuclear = this.listandoCrencaNuclearPeloId(this.id);

    this.crencaNuclearFormulario = this.formBuilder.group({
      crencaDisfuncionalForm: [this.crencaNuclear.crencaDisfuncional],
      evidenciasReestruturantesForm: [this.crencaNuclear.evidenciasReestruturantes],
      crencaFuncionalForm: [this.crencaNuclear.crencaFuncional],
      evidenciasApoiadorasForm: [this.crencaNuclear.evidenciasApoiadoras]
    });
    
   }

  ngOnInit() {
  }

  listandoCrencaNuclearPeloId(id: any){
    return this.requisicoesApiService.listarCrencaNuclearPeloId(id)
                              .then((response) => {
                                this.crencaNuclear = response
                              })
                              .catch((erro) => {
                                console.log(erro)
                              });
    
  }

  logForm(){
    console.log(this.crencaNuclearFormulario.value);
  }

}

However, my form is coming empty. But my API usually returns the values I want, including this.crencaNuclear (which passes the values to the form) gets the values correctly inside the . then(). But after you leave . then() the values are null and so is my form.

Does anyone know what it could be? In case it’s not explained well, you can ask me to explain better.