Reputation: 337
I'm using Angular with spring-boot. And I try to update user details from settings page but when click the update button nothing happen, So can someone let me know where is the issue. If you are asking is update function works on backend yeah it works correctly so the problem is in 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>
Upvotes: 0
Views: 1983
Reputation: 397
Bind click event to the update button
<button type="submit" (click)="updateProfile()" class="btn btn-primary btn-block"> Update </button>
Upvotes: 1