[Ionic4] - ion radio group on Reactive Forms

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 myion-radio-group. I have 2 different radio buttons and I wanted them part of the form.

This is my HTML

<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

  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!

1 Like

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.

Can you post:

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

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?

Thanks for the reply.

So here’s what I have in the controller:

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

Here’s the view

 <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:

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.

@Stusaw

I remember trying this 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

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.