Angular表单报错：必须为名称为'id'的表单控件提供值

看起来你遇到的问题核心是操作顺序冲突和表单控件引用失效导致的，咱们一步步拆解问题并解决：

问题根源分析 #

你当前的代码执行顺序存在关键矛盾：

1. save接口成功返回后，先执行finalize里的updateOffersFormArray()——这个方法会重新设置offersFormArray的所有控件，同时触发statusChanges订阅，把this.offers和this.repeatingOffers替换成全新的FormGroup数组。
2. 之后才执行subscribe里的offerList[index].patchValue(saved)，但此时offerList（也就是原来的this.offers/this.repeatingOffers）已经被statusChanges更新成新数组了，原来的index对应的FormGroup控件要么已经被移除，要么不再属于当前的offersFormArray，自然会触发控件字段缺失的错误。

另外，你的业务逻辑是「移除旧优惠，创建新的重复优惠」，但你却在尝试更新旧优惠的表单控件——这本身就不符合业务逻辑：旧优惠已经被移除，应该添加新的表单控件而不是修改旧的。

解决方案 #

1. 调整执行顺序，移除finalize里的表单更新 #

把updateOffersFormArray()移到subscribe的成功回调里，确保只有当新优惠成功保存后，才更新表单：

this._offerService.remove(this.placeId, offer) 
 .pipe( 
  flatMap((removed: OfferModel) => { 
   // 复用已移除的优惠保存为重复优惠
   removed.id = null; 
   removed.repeatWeekly = true; 
   // 移除finalize，避免提前更新表单导致引用失效
   return this._offerService.save(this.placeId, removed); 
  }), 
 ) 
 .subscribe( 
  (saved) => { 
   console.log(saved); 
   // 先处理表单更新逻辑：移除旧优惠，添加新优惠
   this.handleOfferUpdate(offerList, index, saved);
   // 最后统一更新FormArray
   this.updateOffersFormArray(); 
  },
  (error) => {
    // 处理错误情况，比如恢复旧优惠
    console.error('操作失败:', error);
  }
);

2. 实现正确的表单更新逻辑 #

添加handleOfferUpdate方法，负责移除旧的FormGroup，创建新的FormGroup并添加到重复优惠数组：

private handleOfferUpdate(offerList: AbstractControl[], index: number, saved: OfferModel): void {
  // 1. 从原数组中移除旧优惠的表单控件
  offerList.splice(index, 1);
  
  // 2. 将新保存的优惠转换为FormGroup（假设你有构建表单的方法）
  const newOfferForm = this.buildOfferForm(saved);
  
  // 3. 添加到重复优惠数组
  this.repeatingOffers.push(newOfferForm);
}

// 确保表单包含所有必要控件（包括id），并符合验证规则
private buildOfferForm(offer: OfferModel): FormGroup {
  return new FormGroup({
    id: new FormControl(offer.id, Validators.required), // 确保id控件存在且可赋值
    offerDate: new FormControl(offer.offerDate, Validators.required),
    repeatWeekly: new FormControl(offer.repeatWeekly),
    // 其他字段根据你的业务需求添加
  });
}

3. 优化updateOffersFormArray方法 #

用clear()+push()替代setValue()，避免控件结构不匹配的问题，操作更安全：

updateOffersFormArray() { 
 const tmp = this.repeatingOffers.concat(this.offers); 
 console.log(tmp); 
 
 // 清空原FormArray，再逐个添加新控件
 this.offersFormArray.clear();
 tmp.forEach(control => this.offersFormArray.push(control));
}

4. 检查statusChanges订阅逻辑 #

确保statusChanges里的拆分逻辑不会干扰手动更新：当前逻辑是根据FormArray的控件拆分offers和repeatingOffers，这是合理的，但要避免在手动修改这两个数组后，又触发不必要的循环更新（目前你的逻辑不会有这个问题）。

额外排查点 #

• 确认buildOfferForm方法中所有必填控件（比如id）都已正确初始化，并且控件不是disabled状态（disabled控件无法接收patchValue/setValue）。
• 检查save接口返回的saved对象字段类型是否和表单控件匹配（比如id是数字类型，而非字符串）。

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