So I'm trying to make just a really simple and clean radio button component that can be used with value accessor to be used in the common angular forms scenarios with FormsModule, ReactiveFormsModule and using changeDetectionStrategy.OnPush but I've ran into the issue(s) you can see ON THIS Stackblitz where I'm getting unexpected results which I understand is probably me missing something since it's been a long time since I've done a custom radio.
When it first loads, you get the radio outlines but no labels until you click something and writeValue and onModelChange are undefined while I get a No value accessor for form control with name: error. So could use another pair of eyes so I can use the instance with good 'ol ngModel, formControlName, FormBuilder.
You'll see in the Stackblitz the value accessor is there and implementing ControlValueAccessor so I'm a bit confused since I've done the same approach with another component recently just fine. I could copy/paste parts of the blitz here but figured the example should be enough however if not just let me know.
I have made few changes to your code on Stackblitz, please check and let me know if it resolves your issue.
Below is the summary of the changes done:
internalValue and used it to bind to [ngModel]. Also updating it's value within writeValue() method.writeValue related to this.checked and manual update to input element's checked property. That should automatically be handled by Angular Forms API.[attr.checked] binding and instead of using attribute binding for name and value, simply used property binding.[(ngModel)] syntax, so that the value gets reflected when you print it using ngModel: {{testing}}You may change/tweak other things too, but hopefully the above changes will help you get going.