单选按钮更改事件不会动态触发值更改

Question

我有一个带有单选按钮的简单的 Angular Reactive 表单。当我使用 formControl 更改选定的单选按钮值时，更改事件不会触发。每当单选按钮选择动态更改时是否会触发任何其他事件？ 另外，我正在尝试使用 Syncfusion

ejs-radiobutton

，但这似乎不适用于简单的 HTML 输入[type="radio"]。

export class App {
  form: FormGroup = new FormGroup({
    option: new FormControl('option2'),
  });
  onChanged(e: any) {
    console.log(e);
  }

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

<ul [formGroup]="form" style="margin-top: 50px">
  <!--  <li>
    <ejs-radiobutton #radio label="Option 1" formControlName="option" name="option" [value]="'option1'"></ejs-radiobutton>
  </li>

  <li>
    <ejs-radiobutton label="Option 2" formControlName="option" name="option" [value]="'option2'"></ejs-radiobutton>
  </li>
-->

  <li>
    <label>
      <input type="radio"  formControlName="option" name="option" [value]="'option1'" (change)="onChanged($event)" />
                Option 1
    </label>
  </li>
  <li>
    <label>
      <input type="radio"  formControlName="option" name="option" [value]="'option2'" (change)="onChanged($event)" />
                Option 2
    </label>
  </li>
  <li>
    <label>
      <input type="radio"  formControlName="option" name="option" [value]="'option3'" (change)="onChanged($event)" />
                Option 3
    </label>
  </li>
</ul>
<button (click)="submit()">Click</button>

在上面的代码中，我试图在单击按钮时设置输入值。但是，更改事件没有被触发。

Answer 1

我不确定您使用的是哪个版本的 Angular Material，但请按照单选按钮的示例进行操作。例如，如果您使用的是 Angular 15，以下是示例：

https://v15.material.angular.io/components/radio/examples