如何根据条件添加与更新记录？Angular代码错误修正

你的核心问题是onSubmit方法里的条件判断逻辑错误，错误地将API调用和Id判断混在了一起，同时获取Form控件值的方式也不对。

错误分析 #

原代码中的if(this.service.post(this.orderForm.Id == 0))存在两个问题：

• 不该在这里直接调用service.post()，条件判断只需要做Id值的校验，API调用应该放在insert()或update()方法里
• 获取Form中Id的值方式错误，orderForm是FormGroup实例，不能直接用orderForm.Id获取控件值，需要通过orderForm.value.Id或者orderForm.get('Id')?.value来获取

修正后的代码 #

修改component.ts中的onSubmit方法即可：

onSubmit(orderForm: FormGroup) {
  this.submitted = true;
  if(this.orderForm.valid){
    // 获取表单中的Id值
    const userId = this.orderForm.value.Id;
    // 判断Id是否为0，决定执行插入还是更新
    if(userId === 0){
      this.insert();
    } else {
      this.update();
    }
  }    
}

可选优化（更严谨的控件值获取） #

如果需要更严谨地获取FormControl的值，可以用get方法并做空值判断：

onSubmit(orderForm: FormGroup) {
  this.submitted = true;
  if(this.orderForm.valid){
    const idControl = this.orderForm.get('Id');
    if(idControl?.value === 0){
      this.insert();
    } else {
      this.update();
    }
  }    
}

这样就能正确实现Id等于0时插入新记录，Id不等于0时更新记录的需求了。

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