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