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

Question

这个问题在这里已经有了答案:





Angular - controlValueAccessor method writeValue() not being called

(2 个回答)


2年前关闭。




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

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

使用 FormBuilder 构建组件时，默认设置似乎正常工作我默认为 true 并且选择了第一项；然而，当我点击第二个项目时，第一个没有被取消选择。

任何想法我缺少什么？

更新

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

Answer 1

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

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