Radio button change event does not trigger for on Value change dynamically

Quick Fix: Utilize valueChanges observable of the formControl to track changes in radio button selections. This provides a reactive approach to handling changes, avoiding the need for direct DOM manipulation.

The Problem:

Design a solution to handle the scenario, where the change event must be triggered when the radio button value is changed dynamically using formControl.setValue() method. The solution must work for both native HTML radio buttons and Syncfusion ejs-radiobutton components. Additionally, keep in mind that, the behavior is expected to be consistent across all major browsers.

The Solutions:

Solution 1: Subscribe to formControl.valueChanges

In Angular, you can use formControl.valueChanges to subscribe to changes in the value of a form control. This observable emits a value every time the value of the control changes. You can subscribe to this observable in the ngOnInit() method of your component, and unsubscribe from it in the ngOnDestroy() method to prevent memory leaks.


export class App {
  form: FormGroup = new FormGroup({
    option: new FormControl('option2'),
  });
  changes!: Subscription;

  ngOnInit() {
    this.changes = this.form.controls.option.valueChanges
      .subscribe((res: string) => {
        console.log("change", res);
      });
  }

  ngOnDestroy() {
    this.changes.unsubscribe();
  }

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

This solution works because formControl.valueChanges emits a value every time the value of the control changes, regardless of how the change was made. This means that you can use it to track changes made both programmatically and by user interaction.

Solution 2: Manually Invoke the Code

In HTML, the "change" event is not triggered when the value of a radio input type is changed. The same is true for the Syncfusion radio button. To work around this, you can manually invoke the code that should execute when the event is triggered.

Create a Custom Event Handler:
- In your component class, define a custom event handler function, such as onChanged(), that will be called when the radio button value changes.
- In the HTML template, bind the (change) event of each radio button to the custom event handler.
Manually Trigger the Event:
- When you need to change the radio button value programmatically (e.g., using setValue()), you can manually trigger the change event by calling the custom event handler function with the appropriate arguments.
Handle the Event in the Component Class:
- In the component class, implement the custom event handler function to perform the necessary actions when the radio button value changes.

This approach allows you to manually trigger the change event when the radio button value is changed, ensuring that the desired code is executed.

Q&A

How to trigger an event when radio button value changed dynamically?

—

Subscribe to formControl.valueChanges or create a custom change handler.

What to do when the change event in HTML doesn’t get triggered?

—

Manually invoke the code that should execute when the event is triggered.

How to trigger an event when Syncfusion radio button value changed dynamically?

—

Create a change event handler and invoke it when the value changes dynamically.

Video Explanation:

The following video, titled "How to get the value of the selected HTML radio button with Angular ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

... radio change handler method is called and passed to the event object. Then down here on the page, this selected day property is going to be ...

Radio button change event does not trigger for on Value change dynamically – Angular