自定义Angular2 / 5组件中的无线电输入元素

Question

我正在使用Angular 5，并且内置了一个带有单选按钮的自定义组件。我使用Reactive控件并将单选按钮绑定到FormControl。将无线电控制放入自定义组件后，它停止设置绑定value的{​​{1}}。

以下是自定义组件的用法：

FormControl

<ui-options [name]="'gender'" [options]="['m', 'f']" [formControl]="sex" ngDefaultControl ></ui-options> sex中定义了FormControl：

.ts

如您所见，没有sex: FormControl = new FormControl(null, { validators: Validators.required, updateOn: 'blur' }); 标记，这就是我使用form绑定而不是formControl的原因。仅供记录，我们有其他类似的自定义控件，它们适用于例如输入字段。

组件

formControlName

组件映射到简单字段：

  <ng-container *ngFor="let op of options">
    <input type="radio" id="{{ name + '-' + op }}" name="{{ name }}" [formControl]="formControl" value="{{ op }}">
    <label for="{{ name + '-' + op }}">{{ label + op }}</label>
  </ng-container>

问题

当我点击标签时，收音机确实改变了它的状态 - 它被检查或取消选中，我可以设置具有此状态的按钮等：一切正常。

但是，export class UiOptionsComponent implements OnInit { @Input() options: string[]; @Input() name: string; @Input() label: string; @Input() formControl: FormControl; ... 不会更改FormControl！当我将这个单选按钮放在自定义组件之外时，一切正常。

我的解决方案

我唯一的解决方案是在标签上添加一个设置值的点击处理程序：

value

现在一切正常。

我的问题是：为什么这不能开箱即用？为什么我必须添加点击处理程序？

修改

我创建了一个working example。问题是工作，我的代码仍然无法正常工作：（