单选按钮组件上的值访问器问题

Question

所以我试图制作一个非常简单和干净的单选按钮组件，它可以与值访问器一起使用，用于 angular 表单场景 FormsModule、ReactiveFormsModule 并使用 changeDetectionStrategy.OnPush 但我已经 运行 进入问题你可以看到 ON THIS Stackblitz 我得到了意想不到的结果据我所知，这可能是我遗漏了一些东西，因为我已经很长时间没有制作自定义收音机了。

首次加载时，您会看到单选框轮廓但没有标签，直到您单击某些内容并且 writeValue 和 onModelChange 是 undefined 而我得到 No value accessor for form control with name: 错误。所以可以使用另一双眼睛，这样我就可以使用具有良好 'ol ngModel、formControlName、FormBuilder 的实例。

您会在 Stackblitz 中看到值访问器在那里并实现了 ControlValueAccessor 所以我有点困惑，因为我最近对另一个组件采用了相同的方法，效果很好。我可以 copy/paste 部分闪电战，但认为这个例子应该足够了，但如果不让我知道的话。

Answer 1

providers: [RADIO_VALUE_ACCESSOR]

您的代码中缺少这个。您需要在组件 decortor

的提供程序中添加它

Answer 2

我在 Stackblitz 上对您的代码做了一些更改，请检查并告诉我它是否解决了您的问题。

以下是所做更改的摘要：

• 引入了一个名为 internalValue 的新 RadioButtonComponent 属性 并使用它绑定到 [ngModel]。也在 writeValue() 方法中更新它的值。
• 注释了 writeValue 中与 this.checked 相关的代码，并手动更新了 input 元素的 checked 属性。这应该由 Angular 表格 API.
自动处理
• 在 RadioButtonComponent html 模板中删除了 [attr.checked] 绑定，而不是对 name 和 value 使用属性绑定，仅使用 属性 绑定。
• 在 app.component.html 中没有使用 属性 绑定，而是使用了 two-way 绑定 [(ngModel)] 语法，以便在使用 [=21= 打印时反映该值]

您也可以 change/tweak 做其他事情，但希望以上更改能帮助您继续前进。