# How to add \<ion-radio-group\> to Reactive Form in Ionic / Angular app?

**URL:** <https://forum.ionicframework.com/t/how-to-add-ion-radio-group-to-reactive-form-in-ionic-angular-app/187658>\
**Category:** Ionic Angular\
**Created:** [April 20, 2020, 1:45pm UTC](https://forum.ionicframework.com/t/how-to-add-ion-radio-group-to-reactive-form-in-ionic-angular-app/187658 "2020-04-20T13:45:43Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sweg](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@Sweg](https://forum.ionicframework.com/u/Sweg)\
**Post date:** [April 20, 2020, 1:45pm UTC](https://forum.ionicframework.com/t/how-to-add-ion-radio-group-to-reactive-form-in-ionic-angular-app/187658/1 "2020-04-20T13:45:43Z")

</div>

I am trying to add an `<ion-radio-group>` containing 2 `<ion-radio>` to a reactive form in my Ionic / Angular app.

Below I am initialising the form, & creating a method executed when I submit the form:

```auto
ngOnInit() {
    this.form = new FormGroup({
      userType: new FormControl(null, {
        updateOn: 'blur',
        validators: [Validators.required]
      }),
}

onSubmit() {
    if (this.form.invalid) {
      console.log('form invalid');
      return;
}

```

Here I am giving an `<ion-radio-group>` a `formControlName` :

```auto
<form [formGroup]="form">
    <ion-radio-group formControlName="userType">
        <ion-row>
                <ion-col size-sm="3" offset-sm="3">
                    <ion-label>User Type:</ion-label>
                </ion-col>
        </ion-row>
        <ion-row>
            <ion-col size-sm="3" offset-sm="3">
                <ion-item lines="none">
                    <ion-label>Customer</ion-label>
                    <ion-radio value="customer"></ion-radio>
                </ion-item>
            </ion-col>
            <ion-col size-sm="3">
                <ion-item lines="none">
                    <ion-label>Mechanic</ion-label>
                    <ion-radio value="mechanic"></ion-radio>
                </ion-item>
            </ion-col>
        </ion-row>
    </ion-radio-group>
    <ion-button color="primary" (click)="onSubmit()">Submit</ion-button>
</form>

```

When I execute `onSubmit()` , **form invalid** is logged to the console.

Can someone please tell me how I can resolve this error?

Also - I tried the below change, but now I get this error message when the page loads:

> No value accessor for form control with name: ‘userType’

```auto
<ion-row radio-group formControlName="userType">
    <ion-item>
      User Type
    </ion-item>
    <ion-col>
       <ion-item>
        <ion-label>Customer</ion-label>
        <ion-radio value="customer"></ion-radio>
      </ion-item>
    </ion-col>
    <ion-col>
       <ion-item>
        <ion-label>Mechanic </ion-label>
           <ion-radio value="mechanic"></ion-radio>
           </ion-item>
        </ion-col>
</ion-row>

```