NgbModule.forRoot() breaks 'traditional' style radio buttons

[GeorgeA93]

Bug description:

I am attempting to use 'traditional' style radio buttons, i.e the radio's you can see here

The plunker below shows that these radio's do not work when NgbModule.forRoot() has been called.

You can still interact with the radios, however they do not show the initial value of the model.

Link to minimally-working plunker that reproduces the issue: http://plnkr.co/edit/6BTqmJESmtsjWGwgUuo0?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 2.0.0

ng-bootstrap: 1.0.0-alpha.14

Bootstrap: 4.0.0-alpha.5

[alex321]

This is caused by the fact that ngbRadioGroup is the one notifying all the inputs about the change. There is no ngbRadioGroup when you use default radios hence it breaks the functionality.

@pkozlowski-opensource I think we should introduce a selector [ngbRadioButton] for that instead of using input[type=button] or only apply it to descendants of ngbRadioGroup as it doesn't make sense to override default angular functionality. It's a deal breaker for the whole library if it interferes with standard behaviours. Could we patch that soon as it seems necessary and potentially look into incorporating #1095 ?

[pkozlowski-opensource]

@alex321 you are right, we should probably have a more fine-grained selector... I'm going to look into this issue and your PR tomorrow.

[alex321]

@pkozlowski-opensource I had a look around and as far as I am aware, we are doing what we should be. Do you think that this might be related to angular in any way?

Here's a brief summary that explains my confusion (I am basing it on GeorgeA93's plunker):
I changed the selector for the buttons from input[type=radio] to ngbButton so that I leave Angular to handle the default radios. Then I used choiceControl.registerOnChange but that didn't fire when I change either the default buttons or the ngbButton.

However, if I use choiceControl.setValue(), it does fire as expected. And then both buttons respond as expected. Hence, I am confused how the two should know that a change has occurred.

[maxisam]

This is a nasty one. I spent 2 days for this, since I didn't know it is possible. I am on alpha.20. The standard behavior still doesn't work.

I love this library, but I think if we find a component that can break the default usage, we should remove it from the whole package temporary. Btw, It is not a BAN to that component. lol

ref: qdouble/angular-webpack-starter#247

[bprgit]

We have also spent some time with this issue.

Is there a work around for this issue and/or an ETA on when a fix may be available?

[maxisam]

My work around is pretty simple -- exclude ngbRadioButton component.

Just create a custom module to include everything but ngbRadioButton.

In fact, I think it might be a good idea to do this, just include the ones that you need.

Here it is, save you some time.

import {
    NgbAccordionModule,
    NgbAlertModule,
    // NgbButtonsModule,
    NgbCarouselModule,
    NgbCollapseModule,
    NgbDatepickerModule,
    NgbDropdownModule,
    NgbModalModule,
    NgbPaginationModule,
    NgbPopoverModule,
    NgbProgressbarModule,
    NgbRatingModule,
    NgbTabsetModule,
    NgbTimepickerModule,
    NgbTooltipModule,
    NgbTypeaheadModule
} from '@ng-bootstrap/ng-bootstrap';
import { ModuleWithProviders, NgModule } from '@angular/core';
const NGB_MODULES = [
    NgbAccordionModule, NgbAlertModule, NgbCarouselModule, NgbCollapseModule, NgbDatepickerModule,
    NgbDropdownModule, NgbModalModule, NgbPaginationModule, NgbPopoverModule, NgbProgressbarModule, NgbRatingModule,
    NgbTabsetModule, NgbTimepickerModule, NgbTooltipModule, NgbTypeaheadModule
];

@NgModule({
    imports: [
        NgbAlertModule.forRoot(), NgbCollapseModule.forRoot(), NgbProgressbarModule.forRoot(),
        NgbTooltipModule.forRoot(), NgbTypeaheadModule.forRoot(), NgbAccordionModule.forRoot(), NgbCarouselModule.forRoot(),
        NgbDatepickerModule.forRoot(), NgbDropdownModule.forRoot(), NgbModalModule.forRoot(), NgbPaginationModule.forRoot(),
        NgbPopoverModule.forRoot(), NgbProgressbarModule.forRoot(), NgbRatingModule.forRoot(), NgbTabsetModule.forRoot(),
        NgbTimepickerModule.forRoot(), NgbTooltipModule.forRoot()
    ],
    exports: NGB_MODULES
})
export class CNgbRootModule {
}

// tslint:disable-next-line:max-classes-per-file
@NgModule({ imports: NGB_MODULES, exports: NGB_MODULES })
export class CNgbModule {
    static forRoot(): ModuleWithProviders { return { ngModule: CNgbRootModule }; }
}

[bprgit]

Thanks, worked a treat.

[GoNode5]

@pkozlowski-opensource DzmitryShylovich ask why don't you prefix?
https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/buttons/radio.ts#L76

[wesleycho]

Looks like the culprit is that the provider needs to be provided into the module, not just the directive - see here for a working implementation.

I'll file a PR shortly.

[Ludevik]

I have spent also quite some time with similar issue. In my case i tried to disable the form group containing the radio buttons. As soon as i import NgbModule, the disabling of the radio buttons breaks. When i remove the import, the radio buttons are disabled.

Plunk

The plunker shows also the problem with setting the value.

[changLiuUNSW]

Really nasty! We have spent about 1 week and finally find out this culprit.
Is there any ETA for this issue?

[changLiuUNSW]

@maxisam
I love this library, but I think if we find a component that can break the default usage, we should remove it from the whole package temporary. Btw, It is not a BAN to that component. lol
Totally agreed.
@pkozlowski-opensource Can we remove the whole component temporarily?

[pkozlowski-opensource]

@changLiuUNSW we will remove default matching on radios before beta (hopefully or of 2-3 next releases). For now you can just skip importing this particular module in your app.

[jinwyp]

..... I came here for setting default value for radio？ Now that mean we need choose side for using angular4 or ng bootstrap ？ LOL

[changLiuUNSW]

@jinwyp So the whole component should be excluded until the issue is fixed

[mraiguo]

when I update to 1.0.0-alpha.27,It was suddenly able to run, But not for a while 。I wanna know I , is this fixed？