how to update the records in angular without using "id" in put method

Question

I am developing the mobile recharge website using angular,angular material,springboot ,this code is for admin, who can able to update the plans in website. And the problem is with the edit option. After clicking update button in edit ,instead of updating the values , it creates the new plan .Refer the output image below for clearance.

update.ts


    import { Component, Inject, OnInit } from '@angular/core';
    import { FormGroup,FormBuilder,Validators } from '@angular/forms';
    import { AdminApiService } from '../services/admin-api.service';
    import{ MatDialogRef,MAT_DIALOG_DATA } from '@angular/material/dialog'
    
    @Component({
      selector: 'app-add-plan',
      templateUrl: './add-plan.component.html',
      styleUrls: ['./add-plan.component.css']
    })
    export class AddPlanComponent implements OnInit {
      PlanDetails !: FormGroup;
      actionBtn : string ="Save";
      constructor(private formBuilder:FormBuilder,
        private api: AdminApiService,
        private dialogRef: MatDialogRef<AddPlanComponent>,
        @Inject(MAT_DIALOG_DATA) public editData: any) { }
      
    
    
      
      ngOnInit(): void {
        this.PlanDetails = this.formBuilder.group({
          planName:['',Validators.required],
          planPrice:['',Validators.required],
          planType:['',Validators.required],
          planOffers:['',Validators.required],
          planValidity:['',Validators.required],
          planDescription:['',Validators.required]
        });
    
        if(this.editData){
          this.actionBtn="Update";
          this.PlanDetails.controls['planName'].setValue(this.editData.planName);
          this.PlanDetails.controls['planPrice'].setValue(this.editData.planPrice);
          this.PlanDetails.controls['planType'].setValue(this.editData.planType);
          this.PlanDetails.controls['planOffers'].setValue(this.editData.planOffers);
          this.PlanDetails.controls['planValidity'].setValue(this.editData.planValidity);
          this.PlanDetails.controls['planDescription'].setValue(this.editData.planDescription);
        }
    
      }
    
      addPlan(){
        if(!this.editData){
          if(this.PlanDetails.valid){
            this.api.postPlan(this.PlanDetails.value)
            .subscribe({
              next:(res)=>{
                alert("product added succesfully");
                this.PlanDetails.reset();
                this.dialogRef.close('save');
              },
              error:()=>{
                alert("Error while adding the plan")
              }
            });
        }
        }else{
          this.updatePlan()
        }
      }
      
      updatePlan(){
        this.api.putPlan(this.PlanDetails.value)
        .subscribe({
          next:(res)=>{
            this.PlanDetails.reset();
            this.dialogRef.close('update');
          },
          error:()=>{
            alert("error on update");
          }
        })
        
      }
    
    }

api.service.ts


    import { HttpClient } from '@angular/common/http';
    import { Injectable } from '@angular/core';
    import { environment } from 'src/environments/environment';
    
    @Injectable({
      providedIn: 'root'
    })
    export class AdminApiService { 
      private apiServerUrl=environment.apiBaseUrl;
      
      constructor(private http : HttpClient) { }
      
      postPlan(data: any){
        return this.http.post<any>(`${this.apiServerUrl}/admin-plan/add`,data);
      }
      getPlan(){
        return this.http.get<any>(`${this.apiServerUrl}/admin-plan/all`);
      }
      putPlan(data:any){
        return this.http.put<any>(`${this.apiServerUrl}/admin-plan/update`,data);
      }
      deletePlan(id:number){
        return this.http.delete<any>(`${this.apiServerUrl}/admin-plan/delete/`+id);
      }
    
    
      
    }

image1

image2

Please refer the output image. When I am editing the price from 399 to 39,instead of updating the price ,it is adding new row in output.

can anyone please tell me how to update the particular value ,without creating new rows ,using angular.

how to update the records in angular without using "id" in put method

Postman screenshot.In that I have updated the price from 200 to 201.And It works fine.

The issue is not in angular. It is in api controller. Try hitting this api in postman and you will see the same result — zainhassan
– zainhassan, Commented Mar 3, 2022 at 4:55
While I am performing put operation in postman, it works correctly without adding the new database. But, when I test it in angular,it doesn't working — Keerthi Senthil
– Keerthi Senthil, Commented Mar 3, 2022 at 5:28

zainhassan · Accepted Answer · 2022-03-03 08:22:56Z

0

Pass id along with form value

updatePlan() {
    this.api.putPlan({ id: this.editData.id, ...this.PlanDetails.value })
        .subscribe({
            next: (res) => {
                this.PlanDetails.reset();
                this.dialogRef.close('update');
            },
            error: () => {
                alert("error on update");
            }
        })
}

answered Mar 3, 2022 at 8:22

zainhassan

1,7929 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to update the records in angular without using "id" in put method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related