Angular中复用FormGroup与新建FormGroup哪种方案更优？

方式一比方式二更有明显优势，核心差异和优势点如下：

1. 性能与内存开销差异 #

• 方式一在组件初始化阶段（ngOnInit）仅创建一次FormGroup实例，后续更新数据时只是调用setValue修改已有表单控件的值，不会产生额外的实例创建开销。
• 方式二每次触发onFormChange都会新建FormGroup和对应的FormControl实例，频繁调用会导致不必要的内存分配，触发更多垃圾回收操作，在数据更新频繁的场景下，性能损耗会被放大。

2. 验证逻辑的完整性 #

• 方式一初始化时就配置了完整的表单验证规则（必填、邮箱格式、最大长度等），后续更新数据不会丢失这些校验逻辑，表单始终能按照预期完成校验。
• 方式二新建的FormGroup未配置任何验证规则，相当于丢失了表单校验能力，若要保持校验逻辑，每次创建都需要重复编写验证规则，代码冗余且容易遗漏。

3. 表单状态的连续性 #

• 方式一复用同一个表单实例，表单的交互状态（如dirty、touched、invalid等）会保持连续，不会因为数据更新被重置，用户体验更连贯。
• 方式二每次新建表单都会重置所有状态，比如用户已经修改过表单使其变为dirty，更新数据后表单会回到pristine状态，破坏了用户操作的状态连贯性。

4. 代码可维护性 #

• 方式一的表单结构与验证规则集中在初始化方法中，逻辑清晰，后续修改表单字段或校验规则只需在一处调整，维护成本低。
• 方式二的表单创建逻辑分散在onFormChange方法中，若后续需要扩展表单功能，容易出现逻辑遗漏，代码可维护性差。

方式一代码示例 #

export class ContactComponent implements OnInit { 

  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.form = this.formBuilder.group({ 
      email: ['', [Validators.required, Validators.email]],
      name: ['', [Validators.required, Validators.maxLength(40)]],
    });
  }

  onFormChange(contact: Contact) {
   this.form.controls['email'].setValue(contact.email);
   this.form.controls['name'].setValue(contact.name);
  }
}

方式二代码示例 #

export class ContactComponent implements OnInit { 

  form: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {}

  onFormChange(contact: Contact) {
   this.form = new FormGroup({
            email: new FormControl(contact.email),
            name: new FormControl(contact.name),
    });
  }
}

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