Angular 14响应式表单：如何重置FormGroup内FormArray至初始状态

你的错误是因为清空FormArray后，模板仍在尝试访问已被移除的表单控件（比如索引0的whenValue），导致控件实例找不到。以下是两种正确的重置方式：

方法一：重新构建FormArray（推荐） #

直接用初始配置重新生成FormArray并替换原有的控件，确保模板绑定的是全新的、符合初始状态的表单结构：

resetToInitialState() {
  // 用初始条件数组重新创建FormArray
  const initialArray = this.formBuilder.array(this.getConditionsArray());
  // 替换表单中的conditionalActions控件
  this.conditionalActionForm.setControl('conditionalActions', initialArray);
  // 可选：重置表单值到初始状态（如果需要清空用户输入）
  this.conditionalActionForm.reset();
}

或者更直接地重新构建整个表单：

resetToInitialState() {
  this.conditionalActionForm = this.formBuilder.group({
    conditionalActions: this.formBuilder.array(this.getConditionsArray())
  });
}

方法二：清空后重新添加初始控件 #

先清空FormArray，再手动添加初始的FormGroup，避免模板找不到控件：

resetToInitialState() {
  // 清空现有FormArray
  this.conditionalActions.clear();
  // 创建初始的条件FormGroup
  const initialCondition = this.formBuilder.group(
    {
      whenValue: [''],
      comment: [false],
      attachment: [false],
      actionPlan: [false]
    },
    { validators: [this.checkConditionalValidation] }
  );
  // 添加到FormArray中
  this.conditionalActions.push(initialCondition);
  // 重置表单值
  this.conditionalActionForm.reset();
}

错误原因说明 #

你之前的代码执行this.conditionalActions.clear()后，FormArray变为空数组，但模板中用于渲染的*ngFor仍在尝试访问原有的索引0控件，此时控件实例已被移除，因此抛出There is no FormControl instance attached...的错误。

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