Update radio button directive to work with ReactiveForms

[thecontrarycat]

The current implementation of btnRadio only works if there is an [(ngModel)] binding on the element, and does not work correctly with ReactiveForms.

This PR removes the dependency upon ngModel while allowing the btnRadio directive to work in both a ReactiveForms (with formControlName) or TemplateForms (with [(ngModel)] environment. Furthermore, there is a change to the btnRadio to make it an object so that it can be correctly compared to the model object.

[Martin-Luft]

Ahhhh, we need this for all components:

pagination.component
pager.component
datepicker.component
datepicker-popup.component
button-checkbox.directive
button-radio.directive
timepicker.component
rating.component

[thecontrarycat]

Reactive Forms Example

<form [formGroup]="form">
    <div class="form-group">
        <label>Suitable for Vegetarians?</label>
        <div class="btn-group visible-xs-block visible-sm-block visible-md-block visible-lg-block clearfix">
            <label class="btn btn-primary" formControlName="isVegetarian" [value]="form.value.isVegetarian" [btnRadio]="false">No</label>
            <label class="btn btn-primary" formControlName="isVegetarian" [value]="form.value.isVegetarian" [btnRadio]="true">Yes</label>
        </div>
    </div>
</form>

[thecontrarycat]

Template Forms Example

<form>
    <div class="form-group">
        <label>Suitable for Vegetarians?</label>
        <div class="btn-group visible-xs-block visible-sm-block visible-md-block visible-lg-block clearfix">
            <label class="btn btn-primary" [(ngModel)]="product.isVegetarian" [value]="product.isVegetarian" [btnRadio]="false">No</label>
            <label class="btn btn-primary" [(ngModel)]="product.isVegetarian" [value]="product.isVegetarian" [btnRadio]="true">Yes</label>
        </div>
    </div>
</form>

[thecontrarycat]

Looks like the linter is preventing the use of forwardRef, but this seems to be necessary to get the ControlValueAccessor working correctly (see mgechev/angular2-style-guide#56 for other possible uses of forwardRef).

[bjornharvold]

+1 one this one

[Martin-Luft]

@bjornharvold this issue is closed and already fixed by 5d51939

[RolfVeinoeSorensen]

Can someone show me a html markup and typescript example to use in ReactiveForms?
Is this fix allready in v1.1.16?

[roscopeeco]

Can someone show me a html markup and typescript example to use in ReactiveForms?
I am running v1.6.6 and cannot get button groups to work with reactive forms?

https://github.com/ng-bootstrap/ng-bootstrap/pull/1299/files

I have tried using markup from the above link but with no luck.

thanks

[pantonis]

@roscopeeco Having the same problem. Did you manage to make it work?

[roscopeeco]

No unfortunately not have ended up writing a custom input control