How to edit a form in Angular 6+ from dafault values?

I'm having trouble creating an edit page with Angular. Because the same is very related to the life cycle of the components from the requisitions.

At first, my HTML form looks like this:

<form [formGroup]="formProfile" (submit)="update()">
                    <div class="row">
                        <div class="col-xs-12 col-md-4">
                            <h6 class="badge badge-light p-3">Register Id: <strong>{{ profile.registerId }}</strong></h6>
                            <div class="row">
                              <div class="col-xs-12 col-md-6">
                                <app-input-container label="Name" [hasValidation]="false">
                                    <input class="form-control" type="text" placeholder="Enter your name" formControlName="name">
                                </app-input-container>
                              </div>
                              <div class="col-xs-12 col-md-6">
                                <app-input-container label="Lastname" [hasValidation]="false">
                                    <input class="form-control" type="text" placeholder="Enter your lastname" formControlName="lastname">
                                </app-input-container>
                              </div>
                            </div>
                            <app-input-container label="Email" [hasValidation]="false">
                                <input class="form-control" type="email" placeholder="Enter your email" formControlName="email">
                            </app-input-container>
                            <app-input-container label="Username" [hasValidation]="false">
                                <input class="form-control" type="text" placeholder="Enter your Username" formControlName="username">
                            </app-input-container>
                            <app-input-container label="Phone Number" [hasValidation]="false">
                                <input class="form-control" type="text" placeholder="Enter your Telephone" formControlName="phone">
                            </app-input-container>
                            <app-input-container label="About" [hasValidation]="false">
                                <textarea class="form-control" formControlName="about"></textarea>
                            </app-input-container>
                            <div class="d-flex flex-row mt-5 justify-content-end">
                                <div class="mr-3">
                                    <button type="button" appButton color="dark" data-toggle="modal" data-target="#resetPassword">Reset Password</button>

                                </div>
                                <div>
                                    <button appButton color="primary" type="submit">Save</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

The default values I make a request for the server, which in turn brings me the data pertinent to the profile:

ngOnInit() {
    this.user = this.signinService.UserDetail;
    this.perfilService.getProfile(this.user.id).subscribe((profile: Profile[]) => {
      this.profile = profile.shift();
    }, (err: HttpErrorResponse) => console.error('Algum erro ocorreu ao tentar baixar o perfil do usuario'));

    this.formProfile = this.fb.group({
      name: this.fb.control(this.profile.name),
      lastname: this.fb.control(this.profile.lastname),
      email: this.fb.control(this.profile.email),
      username: this.fb.control(this.profile.username),
      phone: this.fb.control(this.profile.areaCode + this.profile.phone),
      about: this.fb.control(this.profile.about)
    });

  }

If I put it this way, the data is not loaded dynamically. Unless I put in the ngAfterContentChecked () lifecycle. However, it does not support editing. I'm pretty sure there has to be reactive form programming, but I do not know how to resolve to edit a form.