Radio-button checked overriden by ngModel

Question

When declaring a ngModel to a radio group it appears to override the default radio button selection assigned by [checked]="true"

     <!--Radio buttons for units-->
      <ion-list-header style="color: white">
        Units
      </ion-list-header>
   <ion-list radio-group [(ngModel)]="units">
   
    <ion-item>
      <ion-label>Metric</ion-label>
      <ion-radio [checked]="true"  value= "metric"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Imperial</ion-label>
      <ion-radio value="imperial"></ion-radio>
    </ion-item>
  </ion-list>

Therefore there is no checked button by default when the button group is in view.

I have tried placing the ngModel within the radio button tag, the ion-item tag, both methods throw an exception:

Uncaught Error: Uncaught (in promise): Error: No value accessor for form control with unspecified name attribute _throwError@http://localhost:8100/build/vendor.js:27548:20

Any inout appreciated.

sebaferreras sebaferreras · Accepted Answer · 2020-12-24T09:17:01

Since you're binding the radio group to the units property, you don't need to use the checked attribute in your template.

In order to select one of the options by default, you just need to assign the value of that option to the units property:

private someFunction(): void {
  // ...
  this.units = 'metric'; 
}

<!--Radio buttons for units-->
<ion-list-header style="color: white">
  Units
</ion-list-header>
<ion-list radio-group [(ngModel)]="units">
  <ion-item>
    <ion-label>Metric</ion-label>
    <ion-radio value= "metric"></ion-radio>
    </ion-item>
  <ion-item>
    <ion-label>Imperial</ion-label>
    <ion-radio value="imperial"></ion-radio>
  </ion-item>
</ion-list>

Radio-button checked overriden by ngModel

1 Answers