Angular响应式表单：动态修改单选框值时change事件未触发

一、通过FormControl动态修改值时触发事件的解决方案 #

原生<input type="radio">的change事件仅在用户手动交互（点击单选框）时触发，通过formControl.setValue()这种代码层面修改值的操作不会触发DOM的change事件。要监听这种动态值变化，应该直接订阅表单控件的valueChanges observable：

代码修改示例 #

在组件类中添加订阅逻辑：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';

export class App implements OnInit, OnDestroy {
  form: FormGroup = new FormGroup({
    option: new FormControl('option2'),
  });
  private valueSub!: Subscription;

  ngOnInit() {
    // 订阅控件值变化
    this.valueSub = this.form.get('option')!.valueChanges.subscribe(newValue => {
      console.log('值已变更:', newValue);
      // 这里处理值变化后的逻辑，替代原来的onChanged
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，防止内存泄漏
    this.valueSub.unsubscribe();
  }

  submit() {
    this.form.controls.option.setValue('option3');
  }
}

如果需要保留用户手动点击时的change事件处理，也可以同时保留(change)="onChanged($event)"，两种方式互不冲突。

二、Syncfusion ejs-radiobutton的正确使用 #

ejs-radiobutton是Syncfusion封装的独立组件，不能直接用于普通的<input type="radio">标签上，需要按照组件规范使用：

1. 确保已在模块中导入RadioButtonModule：

import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';

@NgModule({
  imports: [RadioButtonModule]
})
export class AppModule { }

2. 模板中正确使用组件，无需手动写<input>标签，组件会自动渲染：

<ul [formGroup]="form" style="margin-top: 50px">
  <li>
    <ejs-radiobutton 
      label="Option 1" 
      formControlName="option" 
      name="option" 
      [value]="'option1'"
      (change)="onChanged($event)"
    ></ejs-radiobutton>
  </li>
  <li>
    <ejs-radiobutton 
      label="Option 2" 
      formControlName="option" 
      name="option" 
      [value]="'option2'"
      (change)="onChanged($event)"
    ></ejs-radiobutton>
  </li>
  <li>
    <ejs-radiobutton 
      label="Option 3" 
      formControlName="option" 
      name="option" 
      [value]="'option3'"
      (change)="onChanged($event)"
    ></ejs-radiobutton>
  </li>
</ul>
<button (click)="submit()">Click</button>

3. 监听Syncfusion单选按钮的变化：
   • 可以使用组件自带的(change)事件，该事件在用户点击或通过FormControl修改值时都会触发
   • 同样也可以通过订阅formControl.valueChanges来监听值变化

补充说明 #

无论是原生单选框还是Syncfusion组件，通过FormControl修改值时，DOM的状态会自动同步，但原生DOM事件不会触发，这是Angular表单的设计逻辑——表单控件的状态是数据源驱动的，DOM事件仅对应用户交互。

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