bug: [Angular] Missing ControlValueAccessor for ion-radio-group

[RafaelKr]

Bug Report

Ionic version:

[x] 4.x

Current behavior: I'm using Reactive Forms in Angular. I have an ion-radio-group as a FormControl and want to disable it. Unfortunately the ion-radio buttons belonging to that group aren't disabled.

Expected behavior: When disabling the ion-radio-group the ion-radios should also be disabled. It should be possible to create a radio-group-value-accessor.ts for that, right? (https://github.com/ionic-team/ionic/tree/master/angular/src/directives/control-value-accessors)

Steps to reproduce:

Related code:

(Will there soon be an Ionic 4 template for Stackblitz or Plunker? The Plunker-link in the issue template is still for Ionic 3)

import { Component, OnInit } from '@angular/core'
import { FormBuilder } from '@angular/forms'

@Component({
    selector: 'app-ion-radio-group-demo',
    styleUrls: ['./ion-radio-group-demo.component.scss'],
    template: `
        <ng-container [formGroup]="demoForm">
            <ion-radio-group formControlName="demoRadioGroup">
                <div class="property-option">
                    <ion-radio [value]="-1"></ion-radio>
                </div>
                <div class="property-option">
                    <ion-radio [value]="0"></ion-radio>
                </div>
                <div class="property-option">
                    <ion-radio [value]="1"></ion-radio>
                </div>
            </ion-radio-group>
        </ng-container>
    `,
})
export class IonRadioGroupDemoComponent implements OnInit {

    demoForm = this.fb.group({
        demoRadioGroup: [null],
    })

    constructor(
        private fb: FormBuilder,
    ) {}

    ngOnInit() {
        this.demoForm.get('demoRadioGroup').disable()
    }

}

Other information:

I can work around it by using a getter and set [disabled]="isDemoRadioGroupDisabled" on every ion-radio, but that's not really pretty.

get isDemoRadioGroupDisabled(): boolean {
  this.demoForm.get('demoRadioGroup').disabled
}

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/home/rafael/.nvm/versions/node/v11.9.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 13 other plugins)

System:

   Android SDK Tools : 26.1.1 (/opt/android-sdk-linux)
   NodeJS            : v11.9.0 (/home/rafael/.nvm/versions/node/v11.9.0/bin/node)
   npm               : 6.9.0
   OS                : Linux 4.15

[Ivnosing]

Having the same problem. Any update on this? One would expect that if IonRadioGroup can be a FormControl then it could be disabled (that is, the IonRadios inside it).

[arafhossain]

Still looking for an update to the above besides disabling IonRadio options individually.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!