CODEWITHSUNDEEP
angulartypescriptspring-bootspring-mvc
Kindth
Kindth

Reputation: 337

Update user profile is not working angular

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

Answers (1)

Anusha_Mamidala
Anusha_Mamidala

Reputation: 397

Bind click event to the update button

<button type="submit" (click)="updateProfile()" class="btn btn-primary btn-block"> Update </button>

Upvotes: 1

Related Questions