Questions on Kendo UI for Angular Forum

2 questions

0 answers

176 views

How to set the initial value of a radio button

I'm creating a form where, if some data already exists, it populates the form with that data. There is a field with three radio buttons in the form and I'm having trouble getting one of the buttons to be checked if that field has a value already. As you can see in the provided stackblitz, the form registers that the gender input has a value of female, but the radio button isn't checked.

How can I get it to be checked?

Thank you!

https://stackblitz.com/edit/angular-7fxtac?file=src%2Fapp%2Fapp.component.ts

RadioButton

asked on 23 Oct 2023

1 answer

701 views

:RadioButton in FormField when using Reactive Forms

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

RadioButton