typescript - 在 Angular 中使用 NgbBootstrap 的响应式表单，单选按钮没有更新模型

我有一个主表格，在它里面是一个表单组数组。我的代码是：

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

我遍历项目集合，通过执行操作创建每个部分

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

我正在尝试通过单选按钮更改的部分是 'textColor' 属性。

我的标记是

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

我发现的情况是，值在初始时被设置，并且页面加载时正确的单选按钮已被高亮显示。然而，当我更改单选按钮时，表单的值不会改变。我尝试了NgbBootstrap的建议以及Angular的建议，但两种尝试都产生了相同的结果。

谢谢