單選按鈕組件上的值訪問器問題

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]

你的代碼中缺少這個。 您需要在組件裝飾器的提供者中添加它