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

Question

所以我试图制作一个非常简单和干净的单选按钮组件，它可以与值访问器一起使用，用于常见的 angular forms 场景，使用FormsModule ， ReactiveFormsModule并使用changeDetectionStrategy.OnPush但我遇到了问题（ s) 你可以在这个 Stackblitz上看到我得到了意想不到的结果，我知道这可能是我遗漏了一些东西，因为我已经很长时间没有做定制收音机了。

当它第一次加载时，你会得到无线电轮廓但没有标签，直到你单击某些东西并且writeValue和onModelChange是未定义的，而我得到一个No value accessor for form control with name:错误。 所以可以使用另一双眼睛，这样我就可以使用具有良好'ol ngModel、formControlName、FormBuilder 的实例。

你会在 Stackblitz 中看到值访问器在那里并实现了ControlValueAccessor所以我有点困惑，因为我最近对另一个组件做了同样的方法就好了。 我可以在这里复制/粘贴闪电战的部分内容，但我认为这个例子应该足够了，但如果不让我知道的话。

Answer 1

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

以下是所做更改的摘要：

• 引入了一个名为internalValue的新 RadioButtonComponent 属性，并使用它绑定到[ngModel] 。 还在writeValue()方法中更新它的值。
• 注释了writeValue中与this.checked相关的代码以及手动更新input元素的checked属性。 这应该由 Angular Forms API 自动处理。
• 在 RadioButtonComponent html 模板中删除了[attr.checked]绑定，而不是对name和value使用属性绑定，只使用属性绑定。
• 在 app.component.html 中，没有使用属性绑定，而是使用了双向绑定[(ngModel)]语法，以便在使用ngModel: {{testing}}

您也可以更改/调整其他内容，但希望上述更改能帮助您继续前进。

Answer 2

providers: [RADIO_VALUE_ACCESSOR]

你的代码中缺少这个。 您需要在组件装饰器的提供者中添加它