# \[Ionic4\] - ion radio group on Reactive Forms

**URL:** <https://forum.ionicframework.com/t/ionic4-ion-radio-group-on-reactive-forms/169073>\
**Category:** ionic-v3\
**Created:** [July 19, 2019, 1:45am UTC](https://forum.ionicframework.com/t/ionic4-ion-radio-group-on-reactive-forms/169073 "2019-07-19T01:45:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nico\_nj](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nico_nj/32/127147_2.png) [@nico\_nj](https://forum.ionicframework.com/u/nico_nj)\
**Post date:** [July 19, 2019, 1:45am UTC](https://forum.ionicframework.com/t/ionic4-ion-radio-group-on-reactive-forms/169073/1 "2019-07-19T01:45:23Z")

</div>

Hi!  
I’m trying to set up a very simple reactive form using **Angular7** and **Ionic4** , my problem is that I’m not being able to use the `formControlName` on my`ion-radio-group`. I have 2 different radio buttons and I wanted them part of the form.

This is my **HTML**

```auto
<ion-radio-group formControlName="recipientType" required>
   <ion-label class="title">Send to:</ion-label>
   <ion-item lines="none" *ngFor="let recipient of recipientTypes">
      <ion-label>{{recipient.text}}</ion-label>
      <ion-radio
      slot="start"
      value="recipient.text"
      ></ion-radio>
   </ion-item>
</ion-radio-group>

```

This is my **component**

```auto
  recipientTypes = [
    { text: "Group", checked: true },
    { text: "Individual", checked: false },
  ]

  constructor(private restService: RestService, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.contactForm = this.formBuilder.group({
      recipientType: new FormControl('', Validators.required),
      topic: new FormControl('', Validators.required),
      activityType: new FormControl('')
    });
  }

```

Thanks in advance for any help provided!

---

<div class="post-metadata">

**Author:** ![Stusaw](https://avatars.discourse-cdn.com/v4/letter/s/ed8c4c/32.png) [@Stusaw](https://forum.ionicframework.com/u/Stusaw)\
**Post date:** [October 14, 2019, 12:34pm UTC](https://forum.ionicframework.com/t/ionic4-ion-radio-group-on-reactive-forms/169073/2 "2019-10-14T12:34:20Z")

</div>

Hi Nico\_Nj

Did you ever get anywhere with this issue? I believe I am having the same problem and cannot find a solution. I really want to try and stay with the Reactive Forms approach but I am beginning to think I may have to resort to Template forms.

Any guidance would be appreciated

Thanks Gregg.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [October 14, 2019, 6:41pm UTC](https://forum.ionicframework.com/t/ionic4-ion-radio-group-on-reactive-forms/169073/3 "2019-10-14T18:41:22Z")

</div>

Can you post:

- enough code to reproduce the issue
- what you want to happen
- what actually happens
- how those two things are different

---

<div class="post-metadata">

**Author:** ![nico\_nj](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nico_nj/32/127147_2.png) [@nico\_nj](https://forum.ionicframework.com/u/nico_nj)\
**Post date:** [October 14, 2019, 6:56pm UTC](https://forum.ionicframework.com/t/ionic4-ion-radio-group-on-reactive-forms/169073/4 "2019-10-14T18:56:47Z")

</div>

Hi Stusaw!

Luckily in my situation our client decided to remove several controls, among them the radio group… so I didn’t have to deal with the issue any longer. Nonetheless I had no major issue working with reactive forms and ionic controls.

Do you mind sharing your code and I can try to give it another try with it?

---

<div class="post-metadata">

**Author:** ![Stusaw](https://avatars.discourse-cdn.com/v4/letter/s/ed8c4c/32.png) [@Stusaw](https://forum.ionicframework.com/u/Stusaw)\
**Post date:** [October 15, 2019, 11:22am UTC](https://forum.ionicframework.com/t/ionic4-ion-radio-group-on-reactive-forms/169073/5 "2019-10-15T11:22:09Z")

</div>

Thanks for the reply.

So here’s what I have in the controller:

```auto
 ngOnInit() {
    this.pipelineSelectionForm = this._fb.group({
      pipelineName: ["", [Validators.required]]
    });
  }

```

Here’s the view

```auto
 <form [formGroup]="pipelineSelectionForm" novalidate autocomplete="off">
        <ion-list>
          <ion-radio-group (ionChange)="mapToLocalValue($event)">
            <ion-item>
              <ion-label>Full Compliance</ion-label>
              <ion-radio slot="start" value="blah"></ion-radio>
            </ion-item>
            <ion-item>
              <ion-label>Comprehensive Motor Insurance (Standalone)</ion-label>
              <ion-radio slot="start" value="griff"></ion-radio>
            </ion-item>
            <ion-item>
              <ion-label>Backsale (All Products)</ion-label>
              <ion-radio slot="start" value="buford"></ion-radio>
            </ion-item>
          </ion-radio-group>
        </ion-list>
</form>

```

I’ve tried adding formControlName=“pipelineName” to both the ion-radio-group and to each individual ion-radio but always get errors along the lines of:

```auto
ERROR Error: There is no FormControl instance attached to form control element with name: 'pipelineName'

```

I’ve seen several different approaches to this markup but have managed to get this to ‘work’ using the (ionChange) event and the use of patchValue(). In other forms I don’t have to manually map the values.

---

<div class="post-metadata">

**Author:** ![nico\_nj](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nico_nj/32/127147_2.png) [@nico\_nj](https://forum.ionicframework.com/u/nico_nj)\
**Post date:** [October 15, 2019, 1:08pm UTC](https://forum.ionicframework.com/t/ionic4-ion-radio-group-on-reactive-forms/169073/6 "2019-10-15T13:08:59Z")

</div>

@Stusaw

I remember trying [this](https://stackoverflow.com/questions/47948838/ionic-radio-group-with-angular-reactive-forms) approach which was working form me but it wasn’t more elegant than the `patchValue()` approach.

The closest thing I’ve found about this is [this example](https://www.djamware.com/post/5d4bcc0916af139536ec1906/ionic-4-and-angular-8-radio-button-and-checkbox-in-formarray)

You can only use formControlName with controls that support [(ngModel)], ion-radio-group does not, and because that reason there are lots of hacks and alternatives in order to implement something similar.

In your case I’d stay with the `patchValue()` solution for now.