Am trying to use a radio box in my ionic app but I can’t see my options.
here’s a sample:
here’s my ts file:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Validators, FormBuilder, FormGroup, FormControl,AbstractControl } from '@angular/forms';
@IonicPage()
@Component({
selector: 'page-param',
templateUrl: 'param.html',
})
export class ParamPage {
langs;
langForm;
public todo:FormGroup;
constructor(public navCtrl: NavController,public navParams: NavParams, private formBuilder: FormBuilder) {
this.langForm = new FormGroup({
"langs": new FormControl({value: 'rust', disabled: false})
});
}
doSubmit(event) {
console.log('Submitting form', this.langForm.value);
event.preventDefault();
}`` `
// and here my html file:
<ion-header>
<ion-navbar>
<ion-title>
Paramétres
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<form (submit)="doSubmit($event)" [formGroup]="langForm">
<ion-list radio-group formControlName="langs">
<ion-list-header>
Language
</ion-list-header>
<ion-item>
<ion-label>Go</ion-label>
<ion-radio value="golang" checked="true"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Rust</ion-label>
<ion-radio value="rust"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Python</ion-label>
<ion-radio value="python"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Ruby</ion-label>
<ion-radio value="ruby"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Clojure</ion-label>
<ion-radio value="clojure"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Java</ion-label>
<ion-radio value="java"></ion-radio>
</ion-item>
<ion-item>
<ion-label>PHP</ion-label>
<ion-radio value="php"></ion-radio>
</ion-item>
<ion-item>
<ion-label>.NET</ion-label>
<ion-radio value="dotnet"></ion-radio>
</ion-item>
<ion-item>
<ion-label>C++</ion-label>
<ion-radio value="cplusplus"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Scala</ion-label>
<ion-radio value="scala"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Haskell</ion-label>
<ion-radio value="haskell"></ion-radio>
</ion-item>
<ion-item>
<ion-label>Erlang</ion-label>
<ion-radio value="erlang"></ion-radio>
</ion-item>
</ion-list>
</form>
</ion-content>
what am doing wrong here?