Reactive form in Angular using NgbBootstrap, radio buttons are not updating model

I have a main form, an inside this is an array of form groups. My code for this is:

this.mainForm = this.formBuilder.group(
  {
    hubName: this.hub.name,
    hubDescription: this.hub.description,
    sections: this.sectionForm // this is of type FormArray
  },
  {
    validator: CustomValidators.hubMainValidator
  });

I iterate through the collection of items, creating each section by doing

return this.formBuilder.group(
  {
    ...
    textColor: section.textColor,
    ...
  },
  {
    validator: CustomValidators.sectionValidator
  }
);

The section I am trying to change via radio button is the 'textColor' property.

My markup is

<div ngbRadioGroup name="text-color-radio" formControlName="textColor">
    <div class="btn-group mr-auto" data-toggle="buttons">
        <label class="btn btn-primary">
           <input type="radio" id="text-light-{{i}}" [value]="lightColor"> Light Text
        </label>

        <label class="btn btn-primary">
           <input type="radio" id="text-dark-{{i}}" [value]="darkColor"> Dark Text
         </label>
     </div>
 </div>

What I find is that the value is set initially, and the correct radio button is highlighted when the page is loaded. However, when I change the radio button the form value does not change. I have tried the NgbBootstrap suggestion and the angular suggestion but both attempts yield the same result.

Thanks