Javascript 单选按钮的角度组件为'；不能正确绑定

我有一个自定义的angular组件，其中包含一些html来构建一个radio表单控件。此组件从父组件传递了许多属性，然后这些属性用于填充收音机本身的属性

但是，单选按钮不作为一个组执行，每个单选按钮都可以独立选择，并且单选按钮本身在页面上一个接一个地加载，就好像在呈现它们时它是挂起的一样

Stackblitz演示：

{{label}}

你能提供一个关于stackblitz的例子吗？@MikeS。当然可以，添加到question@SamWillis，查看此示例可能会对您有所帮助：我发现了一篇很好的文章，可以让您的问题更清楚一些。简而言之，您需要在组件中实现

ControlValueAccesor

接口，才能将其用作自定义表单控件。进行了一些更改，可能还需要对其进行一些调整

<!-- parent component -->
<app-radio-control
  [id]="'appointmentReason1'"
  [formControlName]="'appointmentReason'"
  [radioValue]="1"
  [label]="'Mortgage'"
></app-radio-control>

<app-radio-control
  [id]="'appointmentReason2'"
  [formControlName]="'appointmentReason'"
  [radioValue]="2"
  [label]="'Protection'"
></app-radio-control>

<app-radio-control
  [id]="'appointmentReason3'"
  [formControlName]="'appointmentReason'"
  [radioValue]="3"
  [label]="'Mortgage & Protection'"
></app-radio-control>


<!-- radio component -->
<div class="custom-control custom-radio">
  <input
    formControlName="{{ formControlName }}"
    name="{{ formControlName }}"
    class="custom-control-input"
    type="radio"
    id="{{ id }}"
    [value]="radioValue"
    required
  />
  <label for="{{ id }}" class="custom-control-label">{{ label }}</label>
</div>