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

Question

我正在尝试从用户方法服务获取用户数据以允许用户更新他们的个人数据，但出现错误，我只能获取 "prenom" 字段，即使所有数据都可用它显示在下面的照片中。所以这是我的代码：

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

这是因为您的表单正在异步加载。

您可以在等待 return 数据服务时阻止呈现表单。

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

错误消息是因为您最初将 undefined 传递给 [formGroup]。

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

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

formbuilder

typescript

angular

formgroups