Currently, I am working with Angular and spring-boot. I am facing an issue while attempting to update user details from the settings page. When I click on the update button, nothing happens. Can someone please assist me in identifying where the problem lies? If you are wondering if the update function works on the backend, it does work correctly, so the issue must be related to the frontend.
app.routing
{ path: 'profile-update/:id', component: ProfileUpdateComponent },
SignupData
export interface SignUpData {
id: string;
username: string;
email: string;
nom: string;
prenom: string;
telephone: number;
roles: string[];
password: string;
specialite: string;
adresses: string[];
}
user.service
const API_URL = 'http://localhost:8080/user/';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
adresses: string[];
updateProfile(id: string, userData: SignUpData): Observable<any> {
return this.http.put(API_URL + 'update/' + id, userData, httpOptions);
}
update.component.ts
updateProfile() {
const {adresse1, ...rest} = this.form;
const userData: SignUpData = {...rest, adresses: [adresse1]};
this.userservice.updateProfile(this.id, userData).subscribe(
data => {
console.log(data);
},
err => {
this.errorMessage = err.error.message;
}
);
}
onSubmit() {
this.updateProfile();
this.gotoList();
}
gotoList() {
this.router.navigate(['profile']);
}
user.html
<form
name="form"
(ngSubmit)="f.form.valid && onSubmit()"
#f="ngForm"
novalidate>
<div class="form-row">
<div class="col form-group">
<label>First name </label>
<input type="text" class="form-control" placeholder=""
name="prenom"
[(ngModel)]="form.prenom"
#prenom="ngModel">
</div> <!-- form-group end.// -->
<div class="col form-group">
<label>Last name</label>
<input type="text" class="form-control" placeholder=" "
name="nom"
[(ngModel)]="form.nom"
#nom="ngModel">
</div> <!-- form-group end.// -->
</div> <!-- form-row end.// -->
<div class="form-group">
<button type="submit" class="btn btn-primary btn-block"> Update </button>
</div> <!-- form-group// -->
</form>