Angular：获取响应式表单控件具体类型并复制部分表单

嗨，我明白你现在的困扰：用typeof没法区分FormControl、FormGroup和FormArray，因为它们的类型都返回object。其实Angular的表单控件都是AbstractControl的子类，我们可以用instanceof来精准判断具体类型，再配合递归处理嵌套的表单结构，就能完美复制表单啦！

核心思路 #

因为表单可能存在嵌套（比如FormGroup里包含FormArray，或者FormArray里又有FormGroup），所以我们需要一个递归函数来遍历所有控件，根据每个控件的具体类型创建对应的新实例，同时复制值、验证器等关键属性（只复制值的话，新表单会丢失校验规则哦）。

完整实现代码 #

首先写一个递归克隆控件的函数：

private cloneFormControl(control: AbstractControl): AbstractControl {
  // 处理FormGroup类型
  if (control instanceof FormGroup) {
    const clonedGroup = new FormGroup({});
    // 遍历Group里的所有控件，递归克隆
    Object.keys(control.controls).forEach(key => {
      clonedGroup.addControl(key, this.cloneFormControl(control.controls[key]));
    });
    return clonedGroup;
  } 
  // 处理FormArray类型
  else if (control instanceof FormArray) {
    const clonedArray = new FormArray([]);
    // 遍历Array里的每个控件，递归克隆
    control.controls.forEach(itemControl => {
      clonedArray.push(this.cloneFormControl(itemControl));
    });
    return clonedArray;
  } 
  // 处理FormControl类型
  else if (control instanceof FormControl) {
    // 复制值、同步验证器、异步验证器
    return new FormControl(control.value, control.validators, control.asyncValidators);
  }

  throw new Error('遇到未知的表单控件类型');
}

然后在你的组件里调用这个函数来复制表单：

// 直接克隆整个myForm，转换为FormGroup类型
this.myCopyForm = this.cloneFormControl(this.myForm) as FormGroup;

为什么这比你的原代码更好？ #

• 精准判断类型：用instanceof替代typeof，能准确区分三种表单控件类型；
• 支持嵌套结构：递归处理所有层级的嵌套控件，不管你的表单有多复杂都能复制；
• 完整复制表单状态：不仅复制值，还同步了验证器（包括同步和异步），新表单的校验逻辑和原表单完全一致。

如果你的场景只需要复制值而不需要验证器，可以简化FormControl的复制逻辑，但一般建议保留完整的表单配置，避免后续出现校验问题。

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