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
145
igx-radio and igx-radio-group don't work with dynamic content
posted

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

a)

HTML

    <igx-radio-group [formControl]="myControl">
      <igx-radio *ngFor="let myValue of myDynamicArrayChangedAtRuntime" [value]="myValue">{{myValue}}</igx-radio>
    </igx-radio-group>

TS

//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

a)

    <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

Parents
No Data
Reply
  • 460
    Offline posted

    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

Children