Error with retrieving data to update Angular 13

Question

i'm trying to edit data (a simple one just name ) and I cannot get the old value shown or read the id of my object which is a folder. so I have a component for the details of my folder and there's a button edit and once I click on it it shows me a dialog and supposedly with the old value(old name of the folder) but nothing shows as the id is undefined. this is my detail component where I open the dialog:

public openDialogEdit() {
this.dialog.open(DialogEditComponent, {
width:'30%',
}).afterClosed().subscribe((val)=>{
    //if(val === 'save'){
   // this._fileManagerService.getFolders();
   // }
   console.log('closed');
});
}

and here is my edit dialog component.ts:

 import { Component, Inject, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators} from '@angular/forms';
import { FileManagerService } from 'app/modules/admin/apps/file-manager/file-manager.service';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { NgModule } from '@angular/core';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material/dialog';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl } from '@angular/forms';
import { Dossier } from '../file-manager.types';


@Component({
  selector: 'app-dialog',
  templateUrl: './dialogEdit.component.html',
  styleUrls: ['./dialog.component.scss']
})


export class DialogEditComponent implements OnInit {

  updateUserForm: FormGroup;

  actionBtn: string ='Save';
  constructor(

    private fb: FormBuilder,
    private route: ActivatedRoute,
    private router: Router,
    private formBuilder: FormBuilder ,
    private _fileManagerService: FileManagerService,
    @Inject(MAT_DIALOG_DATA) public editData: any,
    private dialogRef: MatDialogRef<DialogEditComponent>,
    ) {const formControls = {
        name: new FormControl('',[
          Validators.required ]),};
        this.updateUserForm = this.fb.group(formControls);
 }
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 get name() { return this.updateUserForm.get('name'); }


  ngOnInit(): void {
    const idD = this.route.snapshot.params.idD;
console.log('IDD',idD);
    this._fileManagerService.getFolderById(idD).subscribe(
      (res)=>{
        const user = res;

        this.updateUserForm.patchValue({
          name : user.name,
        });

      },
      (err)=>{
        console.log(err);
      }
    );
  }

  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
  updateUser() {
    const data = this.updateUserForm.value;
    const idD = this.route.snapshot.params.id;
    const user = new Dossier(data.name,idD);

    this._fileManagerService.updateFolder(user, this.route.snapshot.params.id).subscribe(
      (res)=>{
        //this.toastr.warning(res.message);
        alert('updated!');
        //this.router.navigate(['/people-list']);
      },
      (err)=>{
        console.log('errrrr',err);
      }
    );

  }
}

and this is my edit component.html :

<h1 mat-dialog-title>Add a folder</h1>
<div mat-dialog-content>
    <form [formGroup]="updateUserForm" (ngSubmit)="updateUser()">
      <mat-label>Folder name</mat-label>
      <input type="text" id="name" formControlName="name" class="form-control">

  </form>
</div>
  <div mat-dialog-action [align]="'end'">
      <button mat-raised-button color="warn" mat-dialog-close>Close</button>
      <input type="submit" value="Update" [disabled]="updateUserForm.invalid" class="btn btn-warning">
    </div>

and this is my service:

 public getFolderById(idD: string): Observable<Dossier>
{
    console.log('valueFolder',idD);
    return this._httpClient.get<Dossier>(this.baseUrl +'dossier/'+ idD);
}
 public updateFolder(folder: any , idD: string) {
    return this._httpClient.put<Dossier>(this.baseUrl+'dossier/' +idD, folder);
  }

this is what shows in my console:

I'm lost any help would be much appreciated.

Answer 1

const idD = this.route.snapshot.params.idD;

you are getting idD using params , can you try to get using queryParams instead of params.

this.route.snapshot.queryParams['idD'];