Radio button change event not triggering for manually set value

I am using Infragistics radio button for my application and recently we have migrated angular from 11 to 17. I am facing one strange issue. Radio button change event is not triggering for first time (manually set) but its working fine if we change it through application side.

I am trying some workaround by subscribing by valuechanges but we have to the pass the event parameter.

Html

       <div class="d-flex align-mode">
          <label class="title pull-left marginType">Mode</label>
          <div class="d-flex flex-column">
            <label class="radio-inline" style="margin-left: 10px">
              <igx-radio name="automaticSubmission"
                         formControlName="automaticSubmission"
                         (change)="onSubmissionModeChange($event)"
                         (click)="onSubmissionModeClick($event)"
                         value="regular"
                         id="regularSubmissionMode"
                         >Regular</igx-radio>
            </label>
          </div>
          <div class="d-flex flex-column marginFifteen">
            <label class="radio-inline ml-5 pl-4">
              <span *ngIf="automaticDisable; else enableAutomatic" (click)="showDisableMessage()">
                <igx-radio [disabled]="true"></igx-radio>
              </span>
              <ng-template #enableAutomatic>
                <igx-radio name="automaticSubmission"
                           formControlName="automaticSubmission"                               
                           (change)="onSubmissionModeChange($event)"
                           (click)="onSubmissionModeClick($event)"
                           value="automatic"
                           id="automaticSubmissionMode">Automatic</igx-radio>
              </ng-template>
              
            </label>
          </div>
        </div>




Typescript

this.submissionForm = this.fb.group({
    automaticSubmission: ''
 });
        
 ngOnInit (): void {
    this.submissionForm.controls.automaticSubmission.setValue('regular');
 }
 
 onSubmissionModeChange (event) {
    alert(event.value);
    this.clearanceSubmissionFacade.setSubmissionMode(event.owner);
 }

 

Hello,

I have been looking into your question and after an investigation, I can say that the igx-radio change event is emitted on UI interaction when the checkbox state is changed. When the value is changed manually through the code, you can execute the required logic directly there.

In addition, since the igx-radio is input from type 'radio', by design the change event would be fired only when the element is checked (but not when unchecked).

If you require to trigger the change event, what I could suggest is to use the select method of the IgxRadioComponent:

this.radio.select();

If you require any further assistance on the matter, please let me know.

Sincerely,
Teodosia Hristodorova
Software Developer

Hi,

Thanks for your response. I have two question from your answer.

How it was worked earlier with same manual select and why it is not working post migration of 17.

Can you give me a more piece of code to achieve your solution.

Hello,

After further investigation, I have determined that emitting a change event when the radio value is set programmatically was considered as an issue and from version 15.1 it is fixed.

Since the value is set through the code, you could add the required logic directly after that. For example:

  public ngOnInit() {
    this.user.controls.automaticSubmission.setValue('regular');
    //add you logic here
  }

Otherwise, in order to trigger the change event you could use the radio select method. For example:

  @ViewChild('radio', { read: IgxRadioComponent, static: true })
  public radioButton: IgxRadioComponent;
//...
  public ngOnInit() {
    this.user.controls.automaticSubmission.setValue('regular');
    this.radioButton.select()
  }

If you require any further assistance on the matter, please let me know.

Sincerely,
Teodosia Hristodorova
Software Developer