MeanStack: conflict on editing feature'_id' would modify the immutable field '_id'

Question

I've seen solutions in this post and in others, but I did follow the instructions and I'm still getting the error. I understand all the logic, id's can't be replaced, they are immutable, but in my mean stack app, the error persists. The code:

Node route

  router.put("/:id" ,(req, res, next) => {
  const note = new Note({
    _id:req.body.id,
    project: req.body.project,
    note: req.body.note,
    date:req.body.date,

  });
  Note.updateOne({ _id: req.params.id }, note).then(result => {
    console.log(result)
    res.status(200).json({ message: "Update successful!" });
  });
});

Front End edit component:

  ngOnInit(): void {
    this.notesForm=this.fb.group({
      note:['', Validators.required],
      project:['', Validators.required],
      date:[null,Validators.required]
    })
    this.route.paramMap.subscribe((paraMap:ParamMap)=>{
      if(paraMap.has('noteId')){
        this.mode='edit';
        this.noteId= paraMap.get('noteId');
        this.note=this.notePadService.getNote(this.noteId)
        .subscribe(noteData=>{
          this.note = {id: noteData._id, note: noteData.note, date: noteData.date, project: noteData.project};
        })
      }else{
        this.mode='create';
        this.noteId=null;
      }
    })
    this.getProjects();
  }
  onSubmit(){
    if(this.mode==='create'){
      this.notePadService.submitNotes(this.notesForm.value)
      console.log(this.notesForm.value);
      this.router.navigate(['/notes-listing'])
    }else{
      this.notePadService.updateNote(
        this.noteId,this.notesForm.value
      )
    }
  }

Service:

    getNote(id:string){
      return this.http.get<any>('http://localhost:3000/api/notes/'+id)
    }

updateNote(id:string,note:Notes){
    this.http.put('http://localhost:3000/api/notes/'+id,note)
    .subscribe(response=>console.log(response))
}

Also I cant pre-populate the reactive form with the values to edit:

  <label>Select a Project</label>
  <select (change)="test($event.target.value)" formControlName="project"
    class="form-control">
    <option
    *ngFor="let p of projects"
    [value]="p.name">{{ p.name }}</option>
  </select>
<!------->
<label for="notes">Note</label>
<textarea class="form-control"  formControlName="note" type="text" rows="4"></textarea>
<div class="input-group">
<mat-form-field appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input formControlName="date" matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<button mat-raised-button color="warn">Submit</button>
</form>

When I click the edit button (in another component), I get the correct URL but no values, and onsubmit, the backend crashes:

http://localhost:4200/edit/601ec21882fa6af20b454a8d

Can someone help me out? I'm very confused and I cant understand the error since I've done everything the other posts suggest...

buzatto · Accepted Answer · 2021-02-06T17:05:22.267

1

when you call updateOne you already pass as the first argument the id that should be updated. As second argument you pass note that should contain only the properties that will be updated, but not _id itself:

  const note = {
    project: req.body.project,
    note: req.body.note,
    date:req.body.date,
  };

edited Feb 06 '21 at 17:05

answered Feb 06 '21 at 16:56

buzatto

9,704
5
24
33

sorry, but the error persists...is that something to do with the pre populated form (because it is not) – Mellville Feb 06 '21 at 16:59
I edited my answer, pass only an object `note`, don't create a new instance of a `Note`. when you instantiate `new Note` will likely have a `_id` field regardless – buzatto Feb 06 '21 at 17:06
thank you! if not an abuse, how can I pre populate the reactive form with the values to edit? – Mellville Feb 06 '21 at 17:46
@Mellville here are some approaches for this issue https://stackoverflow.com/questions/48686147/set-reactive-form-after-data-loaded-async-angular-5 https://stackoverflow.com/questions/57272081/react-form-initialization-with-data-in-angular-7 https://coryrylan.com/blog/using-angular-forms-with-async-data – buzatto Feb 08 '21 at 21:12

MeanStack: conflict on editing feature'_id' would modify the immutable field '_id'

1 Answers1