# Model driven forms and ion-radio\`

**URL:** <https://forum.ionicframework.com/t/model-driven-forms-and-ion-radio/69202>\
**Category:** ionic-v3\
**Created:** [November 4, 2016, 4:54pm UTC](https://forum.ionicframework.com/t/model-driven-forms-and-ion-radio/69202 "2016-11-04T16:54:11Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sovanyio](https://avatars.discourse-cdn.com/v4/letter/s/c57346/32.png) [@sovanyio](https://forum.ionicframework.com/u/sovanyio)\
**Post date:** [November 4, 2016, 4:54pm UTC](https://forum.ionicframework.com/t/model-driven-forms-and-ion-radio/69202/1 "2016-11-04T16:54:11Z")

</div>

I swear I had this working some time ago but trying to use `[formControlName]` on a `ion-radio` breaks rendering of the entire form.

What I had before:

```auto
      <ion-list *ngIf="question.controlType === 'radio'"
        (ionChange)="manageDecisionButton($event)"
        [formControlName]="question.key"
        radio-group
        item-content
        style="width:100%">
        <ion-item *ngFor="let opt of question.options">
          <ion-label>{{ opt.display }}{{ opt.description ? ' - ' + opt.description : '' }}</ion-label>
          <ion-radio [value]="opt.value"></ion-radio>
        </ion-item>
      </ion-list>

```

I spent my whole day yesterday figuring out that it was the `[formControlName]` directive that was causing the problem (without any errors :/). If I move it to the `<ion-radio>` element the space is rendered for the radios, but the label is not rendered and the radios are not selectable.

Anyone have model driven forms working with ion-radios?

Edit: Actually looks like ionic is failing to add `.radio-checked` to the wrapping div to the radio ‘dot’

---

<div class="post-metadata">

**Author:** ![numerized](https://avatars.discourse-cdn.com/v4/letter/n/34f0e0/32.png) [@numerized](https://forum.ionicframework.com/u/numerized)\
**Post date:** [February 21, 2017, 4:37am UTC](https://forum.ionicframework.com/t/model-driven-forms-and-ion-radio/69202/2 "2017-02-21T04:37:02Z")

</div>

Any solution for this ???

```
<ion-list class="radio-group-margin-fix" radio-group formControlName="done">
          <ion-item>
            <ion-label>It's an activity I've already done.</ion-label>
            <ion-radio value="true"></ion-radio>
          </ion-item>
          <ion-item>
            <ion-label>It's an activity that I plan to do in the future.</ion-label>
            <ion-radio value="false"></ion-radio>
          </ion-item>
        </ion-list>
```

---

<div class="post-metadata">

**Author:** ![lisatassone](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/lisatassone/32/105242_2.png) [@lisatassone](https://forum.ionicframework.com/u/lisatassone)\
**Post date:** [June 26, 2017, 1:15am UTC](https://forum.ionicframework.com/t/model-driven-forms-and-ion-radio/69202/3 "2017-06-26T01:15:36Z")

</div>

Are you by any chance, building the form twice after initialisation? I ran into a few issues with the radios and tracked it down to a bit of code that was doing that.