错误:formGroup需要一个formGroup实例.请输入一个.无法获取数据

Question

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

userProfile.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]]
});
});
}
}

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>

这是一张让事情变得更清楚的照片：

因为它显示了json格式的所有可用数据，但仍然无法获得

Answer 1

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

在等待服务返回数据时，可以防止表单呈现。

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

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