:RadioButton in FormField when using Reactive Forms

[Ursus]

I am creating an application that allows you to create forms dynamically using JSON. I have most of it running but am having a problem with Kendo RadioButtons. I have narrowed my problem down to the template references in your example that I found here: 

https://www.telerik.com/kendo-angular-ui/components/inputs/radiobutton/

I am looking at the FormField Association example. In my template I have a *ngFor to loop through the values for the options that I am reading from the JSON file. The problem is that I cannot add the template reference dynamically (I have been told that this is a problem with Angular) which means that I cannot use FormField as shown in your example as the template references are hard coded.

Attached is my try (I am quite new to Angular) - I added a templateReference field to my options that is just a string eg. #one that I wanted to add to the input tag...

<ng-container

  [formGroup]="form"

  [ngClass]="field | valuesToCss: isGroupControl"

  class="eks-radio-button-control"

>

  <kendo-formfield [orientation]="getOrientation()" showHints="initial">

    <label for="{{field.key}}">{{field.label}}</label>

    <ng-container *ngFor="let option of field.options">

        <input

          {{option.templateReference}}  

          type="radio"

          [value]="option.value"

          [readonly]="field.readOnly"

          [formControlName]="field.key"

          kendoRadioButton

        />

        <label for="{{option.key}}"

          >{{option.value | isNull:'Value missing in JSON file' }}</label

        >

    </ng-container>

    <kendo-formhint>{{field.hint | isNull: ''}}</kendo-formhint>

    <kendo-formerror>{{field.error}}</kendo-formerror>

  </kendo-formfield>

</ng-container>

 

the above code gives me the error:

The `kendo-formfield` component should contain only one control of type NgControl with a formControlName(https://angular.io/api/forms/FormControlName)or an ngModel(https://angular.io/api/forms/NgModel) binding.

which I do understand and can remove if I do not surround everything in a FormField. I would like to keep the FormField though as it gives me the hints and error fields that I really like.

I could, I suppose, create 20 HTML entries and use *ngIf to hide the ones I am not using... this seams a bit heavy handed though! 

I guess my question is therefore how would I go about adding the template reference dynamically for the RadioButton in Kendo?  

Edit: removed some of the test code I left in in the HTML above

[Martin Bechev]

Hello Ursus,

Thank you for the provided details.

Indeed this is a known issue on our side that has been fixed in v7.3.2 of the Inputs package. For more details please check the following discussion in our public GitHub issue tracker:

https://github.com/telerik/kendo-angular/issues/3365

Please try updating the Inputs package, to the latest stable version, by following the steps outlined in the following article:

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/

I also noticed that ng-container is used to create dynamic radio buttons. Another solution is to wrap the input and label in a li tag as this article demonstrates.

 <ul class="k-radio-list">
            <li class="k-radio-item">
              <input
                type="radio"
                #phoneCall
                value="phoneCall"
                kendoRadioButton
                formControlName="confirmation"
              />
              <kendo-label
                class="k-radio-label"
                [for]="phoneCall"
                text="Phone Call"
              ></kendo-label>
            </li>
...
</ul>

Here is an example that shows how to create dynamic buttons:

https://stackblitz.com/edit/angular-4brxep

I hope this helps.

Regards,
Martin
Progress Telerik

[Ursus]

Hi Martin. Thank you very much, this solved my problem. Cheers, Ursus