FormField with dynamic list of radio buttons

[Johan]

Hi,

I am trying to use a kendo-formfield that contains a list of radio buttons that are dynamically generated by an ngFor. But it errors out with: 

The `kendo-formfield` component should contain only one control of type NgControl with a formControlName.

If I define the radio buttons statically in the html template then it works. So I think this is a bug.

 

Doesn't work:

  <kendo-formfield>
    <kendo-label text="Document type"></kendo-label>
    <ul class="k-radio-list">
      <li class="k-radio-item" *ngFor="let documentType of documentTypes">
        <input type="radio" #documentType [value]="documentType.id" kendoRadioButton formControlName="documentType" />
        <kendo-label class="k-radio-label" [for]="documentType" [text]="documentType.name"></kendo-label>
      </li>
    </ul>
    <kendo-formerror>This field is required</kendo-formerror>
  </kendo-formfield>

 

Works:
  <kendo-formfield>
    <kendo-label text="Document type"></kendo-label>
    <ul class="k-radio-list">
      <li class="k-radio-item" >
        <input type="radio" #documentType1 value="documentType1" kendoRadioButton formControlName="documentType" />
        <kendo-label class="k-radio-label" [for]="documentType1" text="documentType1"></kendo-label>
      </li>

      <li class="k-radio-item" >
        <input type="radio" #documentType2 value="documentType2" kendoRadioButton formControlName="documentType" />
        <kendo-label class="k-radio-label" [for]="documentType2" text="documentType2"></kendo-label>
      </li>
    </ul>
    <kendo-formerror>This field is required</kendo-formerror>
  </kendo-formfield>

 

 

Of course we want dynamic data instead of hardcoded values! So can this please be fixed?

[Svet]

Hi Johan,

Thank you for the provided sample markup.

The issues comes from the usage of documentType which is an object but also used as a template reference variable:

  <kendo-formfield>
    <kendo-label text="Document type"></kendo-label>
    <ul class="k-radio-list">
      <li class="k-radio-item" *ngFor="let documentType of documentTypes">
        <input type="radio" #documentType [value]="documentType.id" kendoRadioButton formControlName="documentType" />
        <kendo-label class="k-radio-label" [for]="documentType" [text]="documentType.name"></kendo-label>
      </li>
    </ul>
    <kendo-formerror>This field is required</kendo-formerror>
  </kendo-formfield>

It seems that the reference variable is used in an attempt to bind the label to its corresponding input. That can be achieved by nesting the input inside the label as demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/labels/label/#association

and here is an example:

https://stackblitz.com/edit/angular-iaxprx-7dznxz?file=app/app.component.ts

I hope the suggestion helps.

Regards,
Svetlin
Progress Telerik