Ionic radio-group with Angular Reactive Forms

I'm working on a project in Ionic and need to use reactive forms from Angular 5. I need to allow a user to select a language preference and I'm doing that with radio-group and ion-radio, but when I make changes to the form, I'm getting

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

Here is my template with the form

<ion-header>
  <ion-navbar>
    <ion-title>User Profile</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <form *ngIf="user" [formGroup]="profileForm" (ngSubmit)="saveUser()">
      <ion-item>
        <ion-label>Display Name</ion-label>
        <ion-input type="text" formControlName="displayName"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>First Name</ion-label>
        <ion-input type="text" formControlName="firstName"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Last Name</ion-label>
        <ion-input type="text" formControlName="lastName"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Email</ion-label>
        <ion-input type="text" formControlName="email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Street</ion-label>
        <ion-input type="text" formControlName="street"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>City</ion-label>
        <ion-input type="text" formControlName="city"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>State</ion-label>
        <ion-input type="text" formControlName="state"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label>Zip Code</ion-label>
        <ion-input type="text" formControlName="zip"></ion-input>
      </ion-item>
      <ion-list radio-group formControlName="preferredLanguage">
        <ion-list-header>
          Select Preferred Language
        </ion-list-header>
        <ion-item>
          <ion-label>English</ion-label>
          <ion-radio value="en-US"></ion-radio>
        </ion-item>
        <ion-item>
          <ion-label>Spanish</ion-label>
          <ion-radio value="es-US"></ion-radio>
        </ion-item>
      </ion-list>
    <button type="submit" ion-button>Submit Profile</button>
  </form>
</ion-content>

Here is my method that initializes the form

initProfileForm() {
    this.profileForm = this.formBuilder.group({
      displayName: [this.user.profile.displayName, Validators.required],
      firstName: [this.user.profile.firstName, Validators.required],
      lastName: [this.user.profile.lastName, Validators.required],
      email: [this.user.profile.email, Validators.required],
      street: [this.user.profile.street, Validators.required],
      city: [this.user.profile.city, Validators.required],
      state: [this.user.profile.state, Validators.required],
      zip: [this.user.profile.zip, Validators.required] ,
      preferredLanguage: [this.user.profile.preferredLanguage, 
Validators.required]
    });
  }

Has anyone else had this issue and how did you solve it?

Upvotes: 2

Answers (4)

PeterS

Reputation: 2954

The answers didn't work for me and I had to revert back to using [(ngModel)] and setting the item manually. The suggestions of moving to ion-list or ion-row seemed to make the situation worse not better. This with Ionic 4.

<ion-radio-group [(ngModel)]="controlValue" ngDefaultControl [ngModelOptions]="{standalone: true}" (ionChange)="setControlValue($event)">

Declare your model variable:

  eventId: string = '';

Set it in initialisation if you need to. And when changed set the form control:

  setControlValue($event){
    this.myForm.controls['controlValue'].setValue($event?.detail?.value);
  }

On the form ngDefaultControl is needed otherwise you will get form issues and the model options indicate that you want to use the legacy ngModel approach and dont issue the error you are mixing both forms.

Upvotes: 0

David Lopes

Reputation: 277

get preferredLanguage() {
  return this.profileForm.get('preferredLanguage').value;
}

set preferredLanguage(ev: CustomEvent) {
  this.profileForm.get('preferredLanguage').patchValue(ev.detail.value);
}

<ion-radio-group [value]="preferredLanguage" (ionChange)="preferredLanguage = $event">
  <ion-item>
    <ion-label>English</ion-label>
    <ion-radio value="en-US"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Spanish</ion-label>
    <ion-radio value="es-US"></ion-radio>
  </ion-item>
</ion-radio-group>

Upvotes: 1

yash_DedSec

Reputation: 251

Make some amendments in your HTML code:

    <ion-item>
      <ion-label>English</ion-label>
      <ion-radio value="en-US" formControlName="preferredLanguage"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Spanish</ion-label>
      <ion-radio value="es-US" formControlName="preferredLanguage"></ion-radio>
    </ion-item>

So basically instead of using it on parent use it individually for each radio button. This worked for me.

Hope it helps!

Upvotes: 1

JamesHandshoe

Reputation: 257

I ended up coming up with a solution. This blog helped me come up with an answer: https://robferguson.org/blog/2017/11/19/ionic-3-and-forms/ Apparently, radio-group doesn't work with formControlName so instead I ended up using this:

  <ion-list radio-group [formControl]="profileForm.controls['preferredLanguage']">
    <ion-list-header>
      Select Preferred Language
    </ion-list-header>
    <ion-item>
      <ion-label>English</ion-label>
      <ion-radio value="en-US"></ion-radio>
    </ion-item>
    <ion-item>
      <ion-label>Spanish</ion-label>
      <ion-radio value="es-US"></ion-radio>
    </ion-item>
  </ion-list>

This fixed the issue so there is no longer an error.

Upvotes: 4

Ionic radio-group with Angular Reactive Forms

Answers (4)

Related Questions