How to get Angular 2 Form Builder to work with <ion-select>

Ionic Framework ionic-v3
1

I have a and have it setup with Form Builder.

The only requirement is that the select is required but a user can pass the validation without selecting a item in the list.

No error is thrown and displayed?

Any ideas?

2

This is the structure Iā€™m working with:

form.html

<ion-header>
  <ion-navbar>
    <ion-title>Title</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <form [formGroup]="form" (submit)="submitForm($event)">

    <ion-list>

      <ion-item>
        <ion-label>
          Label
        </ion-label>

        <ion-select formControlName="option">
          <ion-option value="1">Option 1</ion-option>
          <ion-option value="2">Option 2</ion-option>
          <ion-option value="3">Option 3</ion-option>
          <ion-option value="4">Option 4</ion-option>
        </ion-select>
      </ion-item>

    </ion-list>

    <button ion-button type="submit" [disabled]="!form.valid">
      Submit
    </button>

  </form>

</ion-content>

form.ts

// Libraries
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NavController } from 'ionic-angular';

// Pages
import { ResultPage } from '../result/result';

@Component({
  selector: 'page-form',
  templateUrl: 'form.html'
})
export class FormPage {
  // Form group variable
  form: FormGroup;
  
  constructor(public formBuilder: FormBuilder, public navCtrl: NavController) {
    // Form control name with default value and validator
    this.form = formBuilder.group({
      option: ['1', Validators.required]
    });
  } // constructor()
  
  submitForm(event): void {
    // Prevent default submit action
    event.preventDefault();
    
    // Push view to ResultPage with form values
    this.navCtrl.push(ResultPage, {
      form: this.form.value
    });
  } // submitForm(event)
  
}
3 Likes
3

did you solve this ?