After migrating from Angular 11 to 17, I encountered a strange issue with my application's Infragistics radio button. The change event for the radio button does not trigger manually for the first time, but it works fine when changed through the application side.
To work around this issue, I tried subscribing to the valuechanges and passing 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);
}