My goal is to retrieve user data from a user method service in order to enable users to update their personal information, but I'm encountering an error. Currently, I can only access the "prenom" field, even though all the data is available as seen in the photo below. Here's my code:
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]]
});
});
}
}
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">Edit Profile</h4>
<p class="card-category" style="color:white;">
complete your profile
{{ _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="Email Address"
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="Last Name"
type="text"
/>
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field class="example-full-width">
<input
matInput
formControlName="prenom"
placeholder="First Name"
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)"
>
Update Profile
</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>Additionally, here is a photo for clarity:
The JSON format shows that all data is available, yet I am unable to retrieve it.