Model driven forms and ion-radio`

Ionic Framework ionic-v3
1

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:

      <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’

2

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>
3

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.