如何基于表单文本框值删除数据库中的表单数据？

你当前删除功能失效的核心问题是参数传递不匹配及表单验证逻辑不完善，以下是具体修复步骤：

1. 修正删除方法的参数传递 #

你的SharedService中deleteData方法需要接收number类型的id，但组件里传递的是整个表单对象this.orderForm.value，导致后端无法识别正确的删除ID。修改组件的delete方法：

delete() {
  const recordId = this.orderForm.get('Id')?.value;
  // 直接判断ID是否存在，比依赖表单valid更精准
  if(recordId) {
    this.service2.deleteData(recordId).subscribe({
      next: (result) => {
        console.log(result);
        this.toastr.success('记录删除成功');
        // 删除后清空表单ID输入框
        this.orderForm.get('Id')?.reset();
      },
      error: (err) => {
        console.error('删除失败:', err);
        this.toastr.error('删除失败，请检查ID是否正确');
      }
    });  
  } else {
    this.toastr.error('请输入要删除的记录ID');  
  }   
}

2. 完善表单控件的验证规则 #

原表单的Id控件无必填验证，可能导致this.orderForm.valid在ID为空时仍返回true（默认FormControl为可选状态）。给Id添加必填+数字格式验证，确保用户输入合法ID：

import { Validators } from '@angular/forms'; // 记得导入Validators

public orderForm = new FormGroup({
  Id: new FormControl(null, [Validators.required, Validators.pattern(/^\d+$/)]),
  Name: new FormControl(),
  Address: new FormControl(),   
});

3. 确认后端API路由匹配 #

确保后端DELETE接口路径为http://localhost:5000/api/5mployees/{id}（{id}为具体数字），且后端能正确处理该路径的DELETE请求，根据ID删除对应记录。

4. 可选：规范服务端delete方法配置 #

可以给delete请求统一加上httpOptions（虽然DELETE通常无需请求体，但统一配置更规范）：

deleteData(id: number): Observable<any> {
  return this.http.delete(`${this.APIUrl}/${id}`, httpOptions);
}

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