detailing error with ionic reactive form ion-radio-group and nested values

form-radio-value-error.md

If we have an ion-radio-group with a formControlName, and nested in that ion-radio-group we have ion-radio elements with value attributes, and also other elements with value attributes (such as ion-datetime in our case), the ion-radio-group form control value will be the value of whatever child element value was last set.

<ion-radio-group formControlName="hoursType" class="time-group">

  <div class="weekdays-time">
    <ion-item>
      <ion-label>Weekdays</ion-label>
      <ion-radio value="weekdays" slot="start"></ion-radio>
    </ion-item>

    <ion-item formGroupName="hoursWeekdays">
      <ion-datetime display-format="hh:mm a" minute-values="0,15,30,45" formControlName="startTime" value="{{ defaultStartTime }}"></ion-datetime>
      <span class="to">to</span>
      <ion-datetime display-format="hh:mm a" minute-values="0,15,30,45" formControlName="endTime" value="{{ defaultEndTime }}"></ion-datetime>
    </ion-item>
  </div>

  <div class="everyday-time">
    <ion-item>
      <ion-label>Every Day</ion-label>
      <ion-radio value="everyday" slot="start"></ion-radio>
    </ion-item>

    <ion-item>
      <ion-datetime display-format="hh:mm a" minute-values="0,15,30,45" value="{{ defaultStartTime }}"></ion-datetime>
      <span class="to">to</span>
      <ion-datetime display-format="hh:mm a" minute-values="0,15,30,45" value="{{ defaultEndTime }}"></ion-datetime>
    </ion-item>
  </div>
</ion-radio-group>