Infragistics radio button change event not triggering for manually set value

Question

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);
 }

Answer 1

I do not see a form in your markup. Did you check the console of your application. It should log errors like this:

ERROR Error: NG01050: formControlName must be used with a parent formGroup directive.  You'll want to add a formGroup
      directive and pass it an existing FormGroup instance (you can create one in your class).

    Example:

    
  <div [formGroup]="myGroup">
    <input formControlName="firstName">
  </div>

  In your class:

  this.myGroup = new FormGroup({
      firstName: new FormControl()
  });

To fix this change your markup like this:

    <form [formGroup]="submissionForm">
      <label class="radio-inline" style="margin-left: 10px">
        <igx-radio
          name="automaticSubmission"
          formControlName="automaticSubmission"
          value="regular"
          (change)="onSubmissionModeChange($event)"
          id="regularSubmissionMode"
          >Regular</igx-radio
        >
      </label>
  </form>

Note: looking at the code in your ts file you are initializing the radio with some value. This way it will be checked initially and as it is not inside a radio group it will not be able to be unchecked trough the UI.