Problem passing value with Select Form


#1

Hi, I’m starting with Ionic 2, I’m trying to make a simply select formulary with a few options on it. My code is:

On HTML:

  <ion-item>
    <ion-select [(ngModel)]="category" (ngSubmit)="changeCategory()">
      <ion-option value="tt">TT</ion-option>
      <ion-option value="ttintelligent">TT Intelligent</ion-option>
      <ion-option value="ttmodular">TT Modular</ion-option>
      <ion-option value="tv">TV</ion-option> 
    </ion-select>
  </ion-item>

On TS:

export class CategoryPage {
category: string;
url: string;
constructor(private http: Http) { }

changeCategory(category) {
console.log(category);
}

This code is not working, I can’t get option value in the component file. Any solution? Thanks!


#2

I’ve never seen (ngSubmit) on individual controls, only on forms. Is that supposed to work?


#3

(ngSubmit) comes from NgForm. [(ngModel)] comes from NgModel. In general, you want to use either NgForm, or NgModel, but not both. As a place to start, use NgForm if you want direction to flow from your ts code to the template, and use NgModel if you want direction to flow from the template to your ts code. Alternatively, if your input is complex, use FormBuilder, and if it is super simple, use ngModel.

The situation is more complex than what I just wrote, but it’s a good way to begin.