Dear igx-team,
if found some weird behavior with the igx-radio and igx-radio-group in the version "@infragistics/igniteui-angular": "12.3.9"
Whenever you have some static content, it works nice. If your content is dynamic, it behaves weird.
a) somehow the radios get their own scope and they don't lose the checked when another is selected
b) when i reset values somehow 1 field reamins always as "not pristine" (didn't check for dirty state yet)
working scenario
a)
HTML
<igx-radio-group [formControl]="myControl"> <igx-radio *ngFor="let myValue of ['A', 'B', 'C']" [value]="myValue">{{myValue}}</igx-radio> </igx-radio-group>
TS
is just a formcontrol..
not working scenario
<igx-radio-group [formControl]="myControl"> <igx-radio *ngFor="let myValue of myDynamicArrayChangedAtRuntime" [value]="myValue">{{myValue}}</igx-radio> </igx-radio-group>
//following var is changed during runtime this.myDynamicArrayChangedAtRuntime = someCondition ? ['A', 'B', 'C'] : ['1', '2', '3'] ;
workaround
<igx-radio-group [formControl]="myControl" *ngIf="someConditionThatCanChangeAtRuntime"> <igx-radio *ngFor="let myValue of ['A', 'B', 'C']" [value]="myValue">{{myValue}}</igx-radio> </igx-radio-group> <igx-radio-group [formControl]="myControl" *ngIf="!someConditionThatCanChangeAtRuntime"> <igx-radio *ngFor="let myValue of ['1', '2', '3'] " [value]="myValue">{{myValue}}</igx-radio> </igx-radio-group>
in this workaround i use *ngIf for the the radio-group and somehow i get now the error b) when i am patching the current value into the formControl
b)
after loading data from the backend the current value is just patched into the parent formGroup and somehow it isn't pristine as not touched.
//ts class myFormGroup FormGroup; constructor(private myService: MyService, formBuilder: FormBuilder) { this.myFormGroup = formBuilder.group({ subject: [""] }); } // this pseudo code is called from the HTML depending on user selection uiChanged() { this.myService.getData().subscribe((myData) => { // depending on some ui selection the available radios should change dynamically // this.myDynamicRadioOptions = myData.abc ? ["A", "B", "C"] : ["1", "2", "3"]; this.myFormGroup.reset(myData); }) }
not working workaround
<igx-radio-group [formControl]="myControl"> <ng-container *ngIf="someConditionThatCanChangeAtRuntime"> <igx-radio *ngFor="let myValue of ['A', 'B', 'C']" [value]="myValue">{{myValue}}</igx-radio> </ng-container> <ng-container *ngIf="!someConditionThatCanChangeAtRuntime"> <igx-radio *ngFor="let myValue of ['1', '2', '3'] " [value]="myValue">{{myValue}}</igx-radio> </ng-container> </igx-radio-group>
I just tried the latest version 12.3.33 and the issues a) and b) are still in
Hello Yannick,
I have been looking into your question and my suggestion would be to log this behavior in our GitHub repository - “Bug report” for Ignite UI for Angular here. This will give you the opportunity do directly communicate with our development team regarding the issue and get notifications whenever a new information is available.
I have created a small sample trying to reproduce the described workaround. I am using two radio groups with *ngIf directive with version Ignite UI for Angular 14.0. On my side everything works as expected and I am able to change radio groups and have submit format radio buttons working without getting an error. It is possible that getting an error lies in the specific logic of the application and is caused by the operation of the forms, and not by the radio button workaround itself.
Attached you will find my sample for your reference. Please test it on your side and let me know how it behaves. If this is not an accurate demonstration of what you are trying to achieve, please feel free to modify it and send it back to me along with steps to reproduce. Alternatively, if the behavior cannot be replicated, please feel free to provide your own sample.
Having a working sample on my side, which I can debug, is going to be very helpful in finding the root cause of this behavior, otherwise I suggest to log it in our GitHub repository.
Thank you for your cooperation.
Looking forward to hearing from you.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
Hello Georgi,
thank you for your feedback. Unfortunately, it looks like i my example weren't good enough to reproduce it easily. I just adjusted your example with problem a) + problem +b) + the use cases how to reproduce it. It also occurs in the angular 14 version
https://stackblitz.com/edit/angular-mgp2nr-9ka7qq?file=src/app/radio-dynamic-form/radio-dynamic-form.component.html
Here comes the bug report in git -> https://github.com/IgniteUI/igniteui-angular/issues/11942
Here a screenshot when you follow the use cases