Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
35
Radio button change event not triggering for manually set value
posted

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

 

Parents
  • 1560
    Verified Answer
    Offline posted

    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

Reply Children