含2个单选按钮的Reactive form引发控制台重复输出问题

问题场景与现象 #

我有一个包含FormArray的表单，每个FormGroup内包含2个单选按钮和3个数字输入框，遇到以下异常：

• 点击单选按钮时，控制台会输出重复的FormControl实例：选第一个单选按钮输出2个相同实例，选第二个输出3个；但仅操作数字输入框时，控制台仅输出1个实例，符合预期。
• 仅给一个输入框添加了自定义验证器，但点击单选按钮会触发该验证器执行；在订阅FormGroup的statusChange时，点击单选按钮也会出现重复控件输出，部分数字输入框也会多次触发输出，部分则正常。
• 构建FormGroup时存在3次订阅，即使注释掉2次仅保留valueChange监听，点击单选按钮仍至少触发2次输出，猜测是未选中的单选按钮状态变化和新选中的单选按钮状态变化各触发一次。

预期行为 #

页面加载时两个单选按钮均未选中，一个字段处于禁用状态；选中单选按钮后启用该字段并执行验证。

排查与解决建议 #

1. 处理单选按钮的双重状态变更
   Angular中同一组单选按钮（绑定同一formControlName），选中新选项时，旧选项的checked状态会从true变为false，新选项从false变为true，这两次状态变更都会触发表单控件的valueChanges或statusChanges。可以在订阅时添加distinctUntilChanged()操作符过滤重复的状态/值通知：

this.formGroup.get('radioControl').valueChanges
  .pipe(distinctUntilChanged())
  .subscribe(value => {
    // 处理逻辑
  });

2. 控制验证器触发时机
   自定义验证器会在控件的value或status（包括启用/禁用状态）变化时触发。当选中单选按钮启用字段时，该字段的status从DISABLED变为其他状态，会触发验证器执行。如果不需要在启用时立即验证，可以调整验证器的触发条件，或者在启用字段时设置{ emitEvent: false }：

this.formGroup.get('targetControl').enable({ emitEvent: false });

3. 规范订阅管理
   确保所有表单相关的订阅在组件销毁时取消，避免重复订阅导致多次触发。可以用takeUntil()操作符配合组件的ngOnDestroy生命周期：

private destroy$ = new Subject<void>();

ngOnInit() {
  this.formGroup.valueChanges
    .pipe(takeUntil(this.destroy$))
    .subscribe(...);
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

4. 优化表单构建逻辑
   构建FormGroup时避免重复创建订阅，尽量集中处理表单状态变更逻辑。在设置表单值时，若不需要触发事件，可添加{ emitEvent: false }参数，减少不必要的验证和事件触发：

this.formGroup.patchValue({ radioControl: 'option1' }, { emitEvent: false });

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