Ion-radio not checked in ion-list with formControlName

Ionic Framework ionic-v3
1

Hi All,

I had my ion-radio in the ion-list with formControlName, and the radio button can’t get selected even though the checked value is equal to true. If i remove the formControlName, then it’ll get selected. Any advise would be great.

<ion-content padding>
  <form [formGroup]="selectCurrencyForm" novalidate>
    <ion-list radio-group #selectedCurrency formControlName="selectedCurrency">
      <ion-list-header>
        Currency
      </ion-list-header>
      <ion-item *ngFor="let currencyObj of currencyList">
        <ion-label>{{currencyObj.currency}} -- {{selectedCurrencyVal==currencyObj.currency}}</ion-label>
        <ion-radio [checked]="selectedCurrencyVal==currencyObj.currency" [value]="currencyObj.currency"></ion-radio>
      </ion-item>
    </ion-list>
    <button ion-button block (click)="saveSelectCurrency()">Save</button>
  </form>
</ion-content>

image
ion-radio.png324×576 7.05 KB

2

Could you please show us the corresponding typescript class?

3

This is exactly how it is designed to act. The checked attribute is ignored if the element is bound to something. You must change the value of the backing form control instead.

1 Like
4

@luukschoen
This is my typescript code below

import { Component } from '@angular/core';
import { ViewController, NavParams } from 'ionic-angular';
import { FormBuilder, Validators } from '@angular/forms';
/*
  Generated class for the SelectCurrency page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-select-currency',
  templateUrl: 'select-currency.html'
})
export class SelectCurrencyPage {

  selectCurrencyForm: any;
  currencyList: Array<any>;
  selectedCurrencyVal: string;

  constructor(public viewCtrl: ViewController, public formBuilder: FormBuilder,
    public navParams: NavParams) {
    this.currencyList = [
      {countryname: 'Singapore', currency: 'SGD'},
      {countryname: 'Malaysia', currency: 'MYR'},
      {countryname: 'Indonesia', currency: 'IDR'},
    ];

    this.selectedCurrencyVal = navParams.get("selectedCurrency");
    console.log("selectedCurrency: " + this.selectedCurrencyVal);

    this.selectCurrencyForm = this.formBuilder.group({
      selectedCurrency: ['', Validators.compose([Validators.minLength(10), Validators.required])]
    });    
  }

  saveSelectCurrency() {
    // console.log("Selected currency in modal page: " + this.selectCurrencyForm.value.selectedCurrency);
    this.viewCtrl.dismiss(this.selectCurrencyForm.value.selectedCurrency);
  }
}

@rapropos
Do you mind to give some snippet?

5

Assuming what is coming in via NavParams is a string identifying the currency,

interface Country {
  countryname: string;
  currency: string;
}

let c: Country;
for (let i = 0; i < this.currencyList.length; ++i) {
  if (this.currencyList[i].currency === this.selectedCurrencyVal) {
    c = this.currencyList[i];
  }
}

this.selectCurrencyForm = this.formBuilder.group({
  selectedCurrency: [c, Validators.required]
});

I don’t see the minLength validator making much sense here. You also should change selectCurrencyForm to type FormGroup. Stop (ab)using any, people!

6

@rapropos
Thanks for your reply, but it still doesn’t seem to work. The checkbox is still not checked.

export interface CurrencyModel {
    countryname: string;
    currencycode: string;
}

export class SelectCurrencyPage {

  selectCurrencyForm: FormGroup;
  currencyList: Array<CurrencyModel>;
  selectedCurrencyVal: string;

  constructor(public viewCtrl: ViewController, public formBuilder: FormBuilder,
    public navParams: NavParams) {
    this.currencyList = [
      {countryname: 'Singapore', currencycode: 'SGD'},
      {countryname: 'Malaysia', currencycode: 'MYR'},
      {countryname: 'Indonesia', currencycode: 'IDR'},
    ];

    this.selectedCurrencyVal = navParams.get("selectedCurrency");
    console.log("selectedCurrency: " + this.selectedCurrencyVal);

    let c: CurrencyModel;
    for (let i = 0; i < this.currencyList.length; ++i) {
      if (this.currencyList[i].currencycode === this.selectedCurrencyVal) {
        console.log("this.currencyList[i].currencycode: " + this.currencyList[i].currencycode);
        c = this.currencyList[i];
      }
    }

    this.selectCurrencyForm = this.formBuilder.group({
      selectedCurrency: [c, Validators.compose([Validators.required])]
    });
  }
7

I assumed that you wanted the entire object, so you should be binding to:

[value]="currencyObj"

instead of currencyObj.currency. If all you care about is the currency string, this is much easier. The loop goes away, and:

this.selectCurrencyForm = this.formBuilder.group({
  selectedCurrency: [this.selectedCurrencyVal, Validators.required]
});
8

@rapropos

It’s ok now. Thanks.