# Ion-radio and ion-select inside custom component

**URL:** <https://forum.ionicframework.com/t/ion-radio-and-ion-select-inside-custom-component/92637>\
**Category:** ionic-v3\
**Created:** [June 1, 2017, 10:31am UTC](https://forum.ionicframework.com/t/ion-radio-and-ion-select-inside-custom-component/92637 "2017-06-01T10:31:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![casperkotwal](https://avatars.discourse-cdn.com/v4/letter/c/bb73d2/32.png) [@casperkotwal](https://forum.ionicframework.com/u/casperkotwal)\
**Post date:** [June 1, 2017, 10:31am UTC](https://forum.ionicframework.com/t/ion-radio-and-ion-select-inside-custom-component/92637/1 "2017-06-01T10:31:03Z")

</div>

I have a situation where I’ve created an ion-radio, ion-input and ion-select inside a custom component. I’m using ControlValueAccessor to get values of these from my custom component. I’m getting values from ion-input fine but its not working for ion-radio and ion-select.

ion-select and ion-radio value is setting up fine as if i output it inside my custom component but not inside ngmodel of page.ts

Here is the example plunkr I’m using to get values [https://embed.plnkr.co/nqKUSPWb6w5QXr8a0wEu/?show=preview](https://embed.plnkr.co/nqKUSPWb6w5QXr8a0wEu/?show=preview)

This is my code

```auto
**page.html**
<question-label [(ngModel)]="response[html.key]" ngDefaultControl style="width:100%;" item-content *ngIf="html.group == 'question_label'" [object]="html"></question-label>

**question-label.html**
<ion-input *ngIf="object.question.type == 'input' || object.question.type == 'textarea'" [(ngModel)]="value" (blur)="onBlur()" type="text" placeholder="{{object.text}}"></ion-input>

<ion-list *ngIf="object.question.type == 'radio'" [(ngModel)]="value" radio-group>
	<ion-list-header>{{object.text}}</ion-list-header>

  	<ion-item *ngFor="let radio of object.question.responses">
		<ion-label>{{radio.text}}</ion-label>
		<ion-radio value="{{radio.text}}"></ion-radio>
	</ion-item>
</ion-list>

<ion-item *ngIf="object.question.type == 'organization'">
  <ion-label>{{object.text}}</ion-label>
  <ion-select [(ngModel)]="value">
    <ion-option disabled ="{{radio.disabled}}" *ngFor="let radio of object.question.responses" value="{{radio.text}}">{{radio.text}}</ion-option>
  </ion-select>
</ion-item>

**question-label.ts**
import { Component, Input, forwardRef} from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const noop = () => {
};

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => QuestionLabel),
    multi: true
};

/**
 * Generated class for the QuestionLabel component.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
 * for more info on Angular Components.
 */
@Component({
  selector: 'question-label',
  templateUrl: 'question-label.html'
})
export class QuestionLabel implements ControlValueAccessor {

	@Input() object: Object;

	private innerValue: any = '';

  	constructor() {
  	}

  	private onTouchedCallback: () => void = noop;
    private onChangeCallback: (_: any) => void = noop;

    get value(): any {
        return this.innerValue;
    };

    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }

    onBlur() {
        this.onTouchedCallback();
    }

    writeValue(value: any) {
        if (value !== this.innerValue) {
            this.innerValue = value;
        }
    }

	registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

	registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }

}

```

---

<div class="post-metadata">

**Author:** ![golandsh](https://avatars.discourse-cdn.com/v4/letter/g/a9adbd/32.png) [@golandsh](https://forum.ionicframework.com/u/golandsh)\
**Post date:** [June 1, 2017, 10:33am UTC](https://forum.ionicframework.com/t/ion-radio-and-ion-select-inside-custom-component/92637/2 "2017-06-01T10:33:33Z")

</div>

for select I used [value]=“id” and it did gave me the correct key  
so instead of  
value="{{radio.text}}"

use this  
[value]=“radio.text”

---

<div class="post-metadata">

**Author:** ![casperkotwal](https://avatars.discourse-cdn.com/v4/letter/c/bb73d2/32.png) [@casperkotwal](https://forum.ionicframework.com/u/casperkotwal)\
**Post date:** [June 1, 2017, 10:36am UTC](https://forum.ionicframework.com/t/ion-radio-and-ion-select-inside-custom-component/92637/3 "2017-06-01T10:36:04Z")

</div>

As i said, it already gives me correct key inside custom component. but in actual page where i’ve implemented that component, it gives me empty result

---

<div class="post-metadata">

**Author:** ![golandsh](https://avatars.discourse-cdn.com/v4/letter/g/a9adbd/32.png) [@golandsh](https://forum.ionicframework.com/u/golandsh)\
**Post date:** [June 1, 2017, 10:48am UTC](https://forum.ionicframework.com/t/ion-radio-and-ion-select-inside-custom-component/92637/4 "2017-06-01T10:48:52Z")

</div>

Hey, sorry, my first post was broken.  
What I meant was, you used value="{{radio.text}}"

I am saying you need to bind it like this [value]="radio.text"  
then you will get the value outside