Angular14+MongoDB实现CRUD时POST提交携带多余_id字段问题

你判断的完全准确：表单里的隐藏_id输入框在新建场景下，会携带空值/上次编辑残留的_id值一起提交给POST新建接口，后端收到非预期的_id字段就会抛出异常。以下是三种可直接落地的解决方案，改动量从小到大排列：

方案1：提交前解构剔除_id字段（改动最小） #

不需要改模板和服务层代码，只需要修改组件提交逻辑中新建分支的代码，提交前用对象解构把_id从表单值里剔除，同时补全表单重置后的状态清理，避免值残留：

addOrder(form: NgForm){
  if(form.value._id){
    this.orderService.updateOrder(form.value).subscribe(
      (res) => {
        form.reset();
        // 重置服务中存储的订单对象，避免旧值残留
        this.orderService.selectedOrder = {} as Order;
        this.getOrders();
      },
      err => console.log(err)
    );
  }else{
    // 解构剔除_id字段，剩余参数作为新建订单数据提交
    const { _id, ...newOrderData } = form.value;
    this.orderService.createOrder(newOrderData).subscribe(
      res => { 
        form.reset();
        this.orderService.selectedOrder = {} as Order;
        this.getOrders();
      },
      err => console.log(err)
    )
  }
}

方案2：移除隐藏输入框，单独维护编辑状态（逻辑最清晰） #

隐藏域存id本身不是Angular模板驱动表单的最佳实践，你可以直接删掉模板里的隐藏_id输入框，在组件里单独存当前编辑的订单id，从根源上避免表单携带_id字段：

1. 首先修改模板，删除隐藏输入框，顺手修复重复id的小bug（第二个输入框id错写为client了）：

<form>
  <!-- 删除这行隐藏input -->
  <!-- <input type="hidden" name="_id" [(ngModel)]="orderService.selectedOrder._id"> -->
  <input id="client" type="text" class="form-control" name="client" placeholder="Client name" [(ngModel)]="orderService.selectedOrder.client"/>
  <!-- 把第二个输入框的id从client改成price，避免id重复 -->
  <input id="price" type="text" class="form-control" name="price" placeholder="Price" [(ngModel)]="orderService.selectedOrder.price"/>
</form>

2. 在组件类中新增编辑状态变量，修改提交逻辑：

// 存储当前正在编辑的订单id，新建状态下为null
editingOrderId: string | null = null;

// 点击编辑按钮时调用的回填方法
startEdit(order: Order) {
  this.editingOrderId = order._id;
  this.orderService.selectedOrder = {...order};
}

addOrder(form: NgForm){
  if(this.editingOrderId){
    // 更新时手动拼接_id参数
    const updateData = {...form.value, _id: this.editingOrderId};
    this.orderService.updateOrder(updateData).subscribe(
      (res) => {
        form.reset();
        // 重置编辑状态
        this.editingOrderId = null;
        this.orderService.selectedOrder = {} as Order;
        this.getOrders();
      },
      err => console.log(err)
    );
  }else{
    // 表单本身没有_id字段，直接提交即可
    this.orderService.createOrder(form.value).subscribe(
      res => { 
        form.reset();
        this.orderService.selectedOrder = {} as Order;
        this.getOrders();
      },
      err => console.log(err)
    )
  }
}

方案3：服务层统一过滤新建请求的_id字段（容错最高） #

如果不想在组件层处理字段过滤，可以直接在createOrder方法里统一处理入参，不管组件传什么值，新建请求永远不会携带_id字段：

createOrder(order: Order){
  // 拷贝入参，删除_id后再提交，不修改原对象
  const submitData = {...order};
  delete submitData._id;
  return this.http.post(this.URL_API, submitData);
}

额外提醒：你当前模板里价格输入框的id属性和客户输入框重复，都写的是client，会导致DOM选择、label关联功能异常，建议顺手修正为id="price"。

内容的提问来源于stack exchange，提问作者Ignacio Corball