0

因此，我正在尝试制作一个非常简单且干净的单选按钮组件，该组件可与值访问器一起使用，以在常见的角度形式场景中使用FormsModule,ReactiveFormsModule和 usingchangeDetectionStrategy.OnPush但我遇到了您可以看到的问题在这个 Stackblitz上，我得到了意想不到的结果，我理解这可能是我错过了一些东西，因为我已经很长时间没有定制收音机了。

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

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

4

2 回答 2

1

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

以下是所做更改的摘要：

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

您也可以更改/调整其他内容，但希望上述更改将帮助您开始。

于 2022-02-09T16:49:32.143 回答
0 
providers: [RADIO_VALUE_ACCESSOR]

您的代码中缺少此内容。您需要在组件装饰器的提供程序中添加它

于 2022-02-08T19:12:00.973 回答