如何创建与 ReactiveForms 一起使用的自定义单选按钮角度组件

Question

我创建了一个自定义单选按钮，它基本上只将当前值存储在模型属性中，并在样式检查中查看模型和值是否彼此相等。[(ngModel)]当使用模板表单和标签上的属性时，此代码工作得非常好。但是，当我尝试使用反应形式和formControlName属性时，它似乎没有从其他组件获取值。看来模型没有更新。难道我做错了什么？这是我的基本代码（我删除了一些不太重要的东西）

这是该问题的 stackblitz： https: //stackblitz.com/edit/angular-rl3sez

看起来默认工作正常，当使用构建组件时，FormBuilder我将其默认为 true 并且选择了第一项；但是，当我单击第二个项目时，第一个项目不会被取消选择。

我缺少什么想法吗？

更新

我设法找到了一个丑陋的解决方案，这似乎突出了我遇到的问题。如果我在每次更改时将值修补到控件，它就会正常工作。我认为由于某种原因，写入值没有被正确调用。这是 stackblitz： https: //stackblitz.com/edit/angular-dgu2fj

Answer 1

我发现我遇到的主要问题是 writeValue 没有在反应式表单上调用。这就是我注意到的，然后我发现这篇SO 帖子解释了我的问题是有道理的，因为 writeValue 仅在使用 ngModel 时被调用。

为了解决这个问题，我在每次更改时手动调用 writeValue 函数，这里是 stackblitz：https://stackblitz.com/edit/angular-rmkedk ?file=src/app/radio-button.component.ts