Error: formGroup expects a FormGroup instance. Please pass one in. CANNOT GET THE DATA

Question

i am trying to get the user data from an user method service to allow users update their personal data but an error occurs, and i can get only the "prenom" field even so all the data is available as it shown in the photo below. so here is my code :

the userProfil.TS:

 export class UserProfileComponent implements OnInit {
      public _contactForm: FormGroup;

      constructor(
        private userSeervice: UserService,
        private tokenStorage: TokenStorageService,
        private _formBuilder: FormBuilder
      ) {}

      ngOnInit() {
        const id = this.tokenStorage.getUser().id;
        this.userSeervice.getUser(id).subscribe(data => {
          this._contactForm = this._formBuilder.group({
            id: [data.id],
            nom: [data.nom, [Validators.required]],
            prenom: [data.prenom, [Validators.required]],
            email: [data.email, [Validators.required]],
            username: [data.username, [Validators.required]]
          });
        });
      }
    }

the UserPofile.HTML

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <div class="card" data-aos="fade-right">
          <div class="card-header ">
            <h4 class="card-title">Editer Profil</h4>
            <p class="card-category" style="color:white;">
              compléter votre profil
              {{ _contactForm.value | json }}
            </p>
          </div>
          <div class="card-body">
            <form [formGroup]="_contactForm">
              <div class="row">
                <div class="col-md-3">
                  <mat-form-field class="example-full-width">
                    <input
                      matInput
                      formControlName="username"
                      placeholder="Username"
                    />
                  </mat-form-field>
                </div>
                <div class="col-md-4">
                  <mat-form-field class="example-full-width">
                    <input
                      matInput
                      formControlName="email"
                      placeholder="Adresse email"
                      type="email"
                    />
                  </mat-form-field>
                </div>
              </div>
              <div class="row">
                <div class="col-md-6">
                  <mat-form-field class="example-full-width">
                    <input
                      matInput
                      formControlName="nom"
                      placeholder="Nom"
                      type="text"
                    />
                  </mat-form-field>
                </div>
                <div class="col-md-6">
                  <mat-form-field class="example-full-width">
                    <input
                      matInput
                      formControlName="prenom"
                      placeholder="Prénom"
                      type="text"
                    />
                  </mat-form-field>
                </div>
              </div>

              <button
                mat-raised-button
                type="submit"
                style="background-color: #09c0a3;"
                class="btn  pull-right"
                (click)="update(_contactForm.value.id)"
              >
                Modifier Profil
              </button>
              <div class="clearfix"></div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

and this is a photo to make things more clear:

as it shown all the data available in the json format but still can't get them

Answer 1

It's because your form is being loaded asynchronously.

You can prevent the form from rendering while you are waiting for the service to return the data.

<form *ngIf="_contactForm" [formGroup]="_contactForm">
  <!-- the form -->
</form>

The error message is because you are initially passing undefined into [formGroup].