Unable to get the handle of list inside form

I have a list getting data from firebase and it populates inside a form. I am able to get the handle of all the other fields of the form whereas not able to get the handle of the list selection. Setting formControlName to the ion-item throws error.

But, I am able to achieve the desired result through have the but not through the following one.

… in html file


  <ion-navbar colour="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>


<ion-content padding>
  <ion-list no-lines>

    <form [formGroup]="expenseForm" (ngSubmit)="logForm()">
        <ion-label floating>Date</ion-label>
      <ion-datetime displayFormat="MM/DD/YYYY" pickerFormat="DD-MM-YYYY" formControlName="expDate" ></ion-datetime>

    <!-- <ion-list>
      <ion-item *ngFor="let cat of cats | async"  formControlName="scat">

    </ion-list> -->

<ion-label floating>Select Category</ion-label>
  <ion-select  formControlName="scat">

    <ion-option  *ngFor="let cat of cats | async" >{{cat.title}}</ion-option>


        <ion-label floating>Amount</ion-label>
        <ion-input type="number" formControlName="amount"></ion-input>

  <ion-label floating>Remark</ion-label>
        <ion-input  type="text" formControlName="remark"></ion-input>


selector: ‘page-expense-form’,
templateUrl: ‘expense-form.html’,
export class ExpenseFormPage {
cats: FirebaseListObservable<any[]>; //get the list for items from firebase . have value

expenseForm: FormGroup;

constructor(public db: AngularFireDatabase, public navCtrl: NavController, public navParams: NavParams, public formBuilder: FormBuilder) {
this.cats = db.list(’/category’);
this.expenseForm = this.formBuilder.group({

    expDate: ['', Validators.required],
  amount: ['', Validators.required],
scat: ['' , Validators.required], -> this is the list to be populated from firebase.
  remark: [''],



I’m confused. It looks like you intend to have multiple inputs bound to the same FormControl, but there aren’t even any inputs, and I don’t think <ion-item> can even take formControlName, let alone have any idea what it would mean to do so.

Added the full html file with all input fields. At present, the above code works, because, i am getting the firebase data set within the Select , but, i want to do the same through the ion list, where the code has been commented and not sure what wrong in that.

As I said before, I don’t understand what the commented-out code is intended to do. What is binding an <ion-item> to a form control supposed to mean?