如何创建与反应式窗体一起使用的自定义单选按钮角度组件



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

这是问题的堆栈闪电战:https://stackblitz.com/edit/angular-rl3sez

似乎默认值工作正常,当使用FormBuilder构建组件时,我将其默认为 true 并选择第一项;但是,当我单击第二项时,不会取消选择第一项。

知道我错过了什么吗?

更新

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

我已经发现我遇到的主要问题是 writeValue 没有在响应式形式上调用。这就是我注意到的,然后我发现了这个 SO 帖子,它解释了我的问题有意义,因为 writeValue 仅在使用 ngModel 时被调用。

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

最新更新