Angular 7 创建编辑共用表单提交异常及无路由跳转编辑需求

咱们一步步调整代码，实现点击编辑按钮在当前页面加载数据，提交时直接更新对应记录而不是新增：

1. 移除不必要的路由配置 #

首先打开你的路由模块，删除带:id的编辑路由，只保留主页路由即可：

// 路由模块配置示例
const routes: Routes = [
  { path: 'patient', component: PatientComponent },
  // 删掉这条不需要的路由：
  // { path: 'patient/:id', component: PatientComponent },
  // 其他路由...
];

2. 修改模板中的编辑按钮 #

把原来带routerLink的跳转式编辑按钮，换成点击事件触发数据加载，彻底去掉路由跳转：

<!-- 替换原编辑按钮 -->
<button type="button" class="btn btn-info" (click)="loadPatientForEdit(patient)">
  <i class="fa fa-pencil-square-o"></i>
</button>

另外注意：目前你的<form>标签直接包裹了整个表格，这不符合HTML语义规范，建议后续把表单单独放在数据表格上方的编辑区域（比如输入框组），表格只负责展示数据，逻辑会更清晰。

3. 在组件中添加加载编辑数据的方法 #

在PatientComponent里新增一个方法，用来把选中的患者数据填充到表单，并记录要更新的id：

loadPatientForEdit(patient: Patient) {
  // 将选中的患者数据同步到表单
  this.patientForm.setValue(patient);
  // 记录当前要更新的患者唯一标识
  this.patientIdUpdate = patient.$key;
}

4. 清理ngOnInit中的路由相关代码 #

因为不再通过路由传递id，删掉ngOnInit里这段路由取值的代码：

// 删掉以下代码
const id = this.actRoute.snapshot.paramMap.get('id');
this.crudApi.GetPatient(id).valueChanges().subscribe(data => {
  this.patientForm.setValue(data)
})

修改后的ngOnInit会更简洁：

ngOnInit() {
  this.updatePatientData(); // 若该方法无实际用途可直接移除
  this.crudApi.GetPatientsList();
  this.patientsForm();
  this.dataState();
  let s = this.crudApi.GetPatientsList();
  s.snapshotChanges().subscribe(data => {
    this.Patient = [];
    data.forEach(item => {
      let a = item.payload.toJSON();
      a['$key'] = item.key;
      this.Patient.push(a as Patient);
    })
  })
}

5. 优化提交方法逻辑 #

调整submitPatientData方法，去掉路由跳转，确保更新时正确传递数据：

submitPatientData() { // 无需传递patient参数，直接使用表单值
  if(this.patientIdUpdate == null) {
    this.crudApi.AddPatient(this.patientForm.value);
    this.ResetForm();
  } else {
    // 绑定更新标识到表单数据（或根据你的API要求，单独传递id和数据）
    const updatedPatient = { ...this.patientForm.value, $key: this.patientIdUpdate };
    this.crudApi.UpdatePatient(updatedPatient);
    // 若你的UpdatePatient是(id: string, data: Patient)格式，可改为：
    // this.crudApi.UpdatePatient(this.patientIdUpdate, this.patientForm.value);
    
    this.patientIdUpdate = null; // 更新完成后重置标识
    this.ResetForm();
  }
  // 删掉路由跳转代码：this.router.navigate(['patient'])
};

额外优化建议 #

把表单和表格分离，比如在页面顶部放编辑表单，下方放数据表格，示例结构：

<!-- 顶部编辑表单 -->
<form [formGroup]="patientForm" (ngSubmit)="submitPatientData()">
  <input formControlName="FirstName" placeholder="First Name">
  <input formControlName="LastName" placeholder="Last Name">
  <!-- 其他输入控件... -->
  <button type="submit" class="btn btn-primary">保存</button>
  <button type="button" class="btn btn-secondary" (click)="ResetForm()">重置</button>
</form>

<!-- 下方数据展示表格 -->
<table>
  <tr *ngFor="let patient of Patient | paginate: { itemsPerPage: 7, currentPage: p }; let i = index;">
    <td class="text-center action-block">
      <button type="button" class="btn btn-info" (click)="loadPatientForEdit(patient)">
        <i class="fa fa-pencil-square-o"></i>
      </button>
      <button type="button" class="btn btn-danger" (click)="deletePatient(patient)">
        <i class="fa fa-trash-o"></i>
      </button>
    </td>
    <td>{{patient.FirstName}} {{patient.LastName}}</td>
    <!-- 其他展示列... -->
  </tr>
</table>

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