Unable to get the handle of list inside form

Ionic Framework ionic-v3
1

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

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

</ion-header>


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

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



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

      </ion-item>
    </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-select>
</ion-item>





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

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

controller.ts

…@IonicPage()
@Component({
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: [''],



  });

}
4

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.

5

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.

6

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?