Radio buttons broken in Alpha 37

After updating from Alpha 35 to Alpha 37:

EXCEPTION: TypeError: Cannot read property 'registerRadio' of null in [null]
app.bundle.js:50353 EXCEPTION: TypeError: Cannot read property 'registerRadio' of null in [null]BrowserDomAdapter.logError @ app.bundle.js:50353BrowserDomAdapter.logGroup @ app.bundle.js:50363ExceptionHandler.call @ app.bundle.js:12305(anonymous function) @ app.bundle.js:45501NgZone._notifyOnError @ app.bundle.js:41391errorHandling.onError @ app.bundle.js:41289run @ app.bundle.js:4324(anonymous function) @ app.bundle.js:41304NgZone.run @ app.bundle.js:41253(anonymous function) @ app.bundle.js:45587schedulerFn @ app.bundle.js:15083tryCatcher @ app.bundle.js:16136next @ app.bundle.js:16045_next @ app.bundle.js:22473next @ app.bundle.js:22434(anonymous function) @ app.bundle.js:41146run @ app.bundle.js:4321NgZone._notifyOnTurnDone @ app.bundle.js:41146(anonymous function) @ app.bundle.js:41318zoneBoundFn @ app.bundle.js:4294R @ app.bundle.js:272x @ app.bundle.js:278O @ app.bundle.js:267p @ app.bundle.js:228
app.bundle.js:50353 ORIGINAL EXCEPTION: TypeError: Cannot read property 'registerRadio' of nullBrowserDomAdapter.logError @ app.bundle.js:50353ExceptionHandler.call @ app.bundle.js:12314(anonymous function) @ app.bundle.js:45501NgZone._notifyOnError @ app.bundle.js:41391errorHandling.onError @ app.bundle.js:41289run @ app.bundle.js:4324(anonymous function) @ app.bundle.js:41304NgZone.run @ app.bundle.js:41253(anonymous function) @ app.bundle.js:45587schedulerFn @ app.bundle.js:15083tryCatcher @ app.bundle.js:16136next @ app.bundle.js:16045_next @ app.bundle.js:22473next @ app.bundle.js:22434(anonymous function) @ app.bundle.js:41146run @ app.bundle.js:4321NgZone._notifyOnTurnDone @ app.bundle.js:41146(anonymous function) @ app.bundle.js:41318zoneBoundFn @ app.bundle.js:4294R @ app.bundle.js:272x @ app.bundle.js:278O @ app.bundle.js:267p @ app.bundle.js:228
app.bundle.js:50353 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ app.bundle.js:50353ExceptionHandler.call @ app.bundle.js:12317(anonymous function) @ app.bundle.js:45501NgZone._notifyOnError @ app.bundle.js:41391errorHandling.onError @ app.bundle.js:41289run @ app.bundle.js:4324(anonymous function) @ app.bundle.js:41304NgZone.run @ app.bundle.js:41253(anonymous function) @ app.bundle.js:45587schedulerFn @ app.bundle.js:15083tryCatcher @ app.bundle.js:16136next @ app.bundle.js:16045_next @ app.bundle.js:22473next @ app.bundle.js:22434(anonymous function) @ app.bundle.js:41146run @ app.bundle.js:4321NgZone._notifyOnTurnDone @ app.bundle.js:41146(anonymous function) @ app.bundle.js:41318zoneBoundFn @ app.bundle.js:4294R @ app.bundle.js:272x @ app.bundle.js:278O @ app.bundle.js:267p @ app.bundle.js:228
app.bundle.js:50353 TypeError: Cannot read property 'registerRadio' of null
    at RadioButton.onInit (https://clients.elevatedirect.com/Elevate.Native.Contractors/www/build/js/app.bundle.js:72758:24)
    at AbstractChangeDetector.ChangeDetector_RatePage_0.detectChangesInRecordsInternal (eval at <anonymous> (https://clients.elevatedirect.com/Elevate.Native.Contractors/www/build/js/app.bundle.js:34215:17), <anonymous>:128:99)
    at AbstractChangeDetector.detectChangesInRecords (https://clients.elevatedirect.com/Elevate.Native.Contractors/www/build/js/app.bundle.js:33208:19)
    at AbstractChangeDetector.runDetectChanges (https://clients.elevatedirect.com/Elevate.Native.Contractors/www/build/js/app.bundle.js:33185:15)
    at AbstractChangeDetector._detectChangesInViewChildren (https://clients.elevatedirect.com/Elevate.Native.Contractors/www/build/js/app.bundle.js:33277:19)
    at AbstractChangeDetector.runDetectChanges (https://clients.elevatedirect.com/Elevate.Native.Contractors/www/build/js/app.bundle.js:33189:15)
    at AbstractChangeDetector._detectChangesContentChildren (https://clients.elevatedirect.com/Elevate.Native.Contractors/www/build/js/app.bundle.js:33270:19)
    at AbstractChangeDetector.runDetectChanges (https://clients.elevatedirect.com/Elevate.Native.Contractors/www/build/js/app.bundle.js:33186:15)
    at AbstractChangeDetector._detectChangesInViewChildren (https://clients.elevatedirect.com/Elevate.Native.Contractors/www/build/js/app.bundle.js:33277:19)
    at AbstractChangeDetector.runDetectChanges (https://clients.elevatedirect.com/Elevate.Native.Contractors/www/build/js/app.bundle.js:33189:15)

I rolled back to 35 and they work again.

Worth raising an issue here I think

Here: https://github.com/driftyco/ionic2/issues/673

I commented on that issue too, but the markup has changed from

<ion-radio-group>

to

<ion-list radio-group>

Please let me know if you still have issues, and see this file for more examples: https://github.com/driftyco/ionic2/blob/master/ionic/components/radio/test/basic/main.html

Thanks! However:

I updated to Alpha 37 (edited package.json and ran npm install), then put in the example code (fruits). I’m getting:

ORIGINAL EXCEPTION: No value accessor for ‘fruits’

It stumbles here:

function setUpControl(control, dir) {
    if (lang_1.isBlank(control))
        _throwError(dir, "Cannot find control");
    if (lang_1.isBlank(dir.valueAccessor))
        _throwError(dir, "No value accessor for")**;

The fruits example is using a form, do you have the form controls defined?

https://github.com/driftyco/ionic2/blob/master/ionic/components/radio/test/basic/index.ts#L20-L24

For more info on forms:

http://learnangular2.com/forms/
https://angular.io/docs/ts/latest/guide/forms.html

If you don’t need to use a form, you can use ng-model:

https://github.com/driftyco/ionic2/blob/master/ionic/components/radio/test/basic/main.html#L59-L66
https://github.com/driftyco/ionic2/blob/master/ionic/components/radio/test/basic/index.ts#L35

1 Like

Thanks for your response. Appreciate the support!

There was a second radio group on the page that was still in old format, this was wreaking havoc.

1 Like

hi @brandyshea Are you sure this still works on alpha40 ? I’m trying out your basic example at the bottom (the friends and enemies one) and the model doesn’t update ?

So the code sample I linked to (on the master branch) is using the latest Angular, alpha.52, which changed all of the markup syntax to camelCase. If you are using alpha40 you should be using ng-model:

<ion-list radio-group [(ng-model)]="relationship">
  <ion-radio value="friends">Friends</ion-radio>
  <ion-radio value="enemies">Enemies</ion-radio>
</ion-list>

<div padding>
  <code><b>relationship:</b> {{relationship}}</code>
</div>

I confirmed that is still working. However, we will be doing a release of Ionic 2 alpha 41 shortly which will require the camelCase changes.

See Angular’s changelog for more info:

1 Like

Ah, thank you. That makes sense. I thought I was going a bit crazy.

I actually thought I was too. I couldn’t figure out why it stopped working all of a sudden. :stuck_out_tongue:

We’re actually skipping to an alpha.42 release of Ionic 2, but I’d hold off on updating until we get all of the starters & the conference app updated. This release has a ton of changes. :smile: