Igniteui-angular: igx-radio - does not remove checked style after another igx-radio gets checked when using Reactive Forms

[tkiryu]

Steps to reproduce

1. Go to https://stackblitz.com/edit/igx-editors-issue
   To make it easy to see what happens, I override default style and have native radios shown.

2. Click an igx-radio.

3. Click another igx-radio.

Result

Checked style for the first igx-radio does not be removed.

Expected result

Checked style for the first igx-radio should be removed.

[simeonoff]

Currently we have a limitation regarding this. It is mentioned in the README.md of the radio. You have to bind to ngModel for the radio buttons to update the checked class.

[tkiryu]

@simeonoff other editor components/directives(igx-datePicker, igx-time-picker, igxInput and so on) also don't support Reactive Forms?

And do you have a plan to support Reactive Forms?

[simeonoff]

@tkiryu Hm, the igx-radio does support reactive forms, and so do all of the directives/components you mention above. What makes you think they are not supported in reactive forms?

[bkulov]

We've started working on a new component (radio group) which will solve this issue - #1610.

[tkiryu]

@simeonoff I'm so sorry for the late reply. I missed your mention.
That's because there is the Issue #1144.

[tkiryu]

@bkulov I got it. I'm looking forward to it!

[SlavUI]

related to #1610

[bkulov]

@tkiryu Once the PRs are merged you could use the new directive as in the example bellow:

You could also take a look at the demo I made. It demonstrates igx-radiogroup usage without any bindings, with ngModel binding and with formName and formControlName (reactive forms). The demo could be found in src/app/radio/ folder.

We will be updating the official docs and samples next week.

[tkiryu]

@bkulov , thank you for your information! I'll check your repo.

By the way, let me ask you some questions about consistency.

There is a similar component called IgxInputGroupComponent.

1) IgxInputGroupComponent is implemented as Component.
Could you tell me why IgxRadioGroupDirective is implemented as Directive?

2) IgxInputGroupComponent's selector is igx-input-group.
So, I think igx-radio-group is better. Could you tell me your thoughts on this?

[bkulov]

@tkiryu,
1) IgxInputGroupComponent has an html template. IgxRadioGroupDirective is a directive because we don't need all the functionality a Component provides. Radio group doesn't have a template and only synchronizes the radio buttons selection. Angular Material also have a directive for radio groups.
2) I'll rename the selector to igx-radio-group for consistency.

[tkiryu]

@bkulov , thank you so much. I got it!

[tkiryu]

@bkulov thanks for renaming selector!

https://github.com/IgniteUI/igniteui-angular/pull/1677/commits/ea38f66d8a039634740a1f5751cd354d803c45b3