How to implement ngModel (two way binding) for radio buttons when used as custom Component?

Issue

I have a custom Component for radio buttons using: NG_VALUE_ACCESSOR
I embed the radio-buttons in a parent component and try to pass the ngModel and required attribute to it, but It doesn’t work.

All the use case and code can be found here: DEMO

The radio buttons used directly in the parent component without implementing them as custom child component, work fine.

Any idea where I’am going wrong? Do I have to use make use of ngModelChange() as mentioned in the answer of this question

Solution

Add this attribute to your input

[value]='rdOption'

It is not working because you have not specified the value of each radio button in your group.

And also call the change function when you change your value. Add this to your input.

(change)='propagateChange(rdOption)'

When you change the value, form control should be notified. That is why you register the onChange function. That is how the bridge between the form control and your component interacts with each other.

Answered By – Dulanjaya Tennekoon

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.