使用ionic2验证select标签

Question

我希望验证电子邮件并选择标签，如TIN / GRN标签。我不知道如何使用ionic2和typescript为select和email条件编写验证。

这是我的代码，请建议我如何编写电子邮件验证和选择选项。

<ion-list>
  <ion-row class="head">
    <p>Personal Details</p>
  </ion-row>

  <ion-list class="lis1">
    <ion-row>
      <ion-item width-50 >
        <ion-label floating >First Name</ion-label>
        <ion-input type="text" [(ngModel)]="firstName" maxlength="30" required></ion-input>
      </ion-item>

      <ion-item width-50  >
        <ion-label floating>Last Name</ion-label>
        <ion-input type="text" [(ngModel)]="lastName" maxlength="30" required></ion-input>
      </ion-item> 
    </ion-row>

    <ion-item>
      <ion-label floating>Email</ion-label>
      <ion-input type="email" [(ngModel)]="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$"  maxlength="64" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>Telephone</ion-label>
      <ion-input type="number" [(ngModel)]="phoneNo" minlength="10" maxlength="10" required></ion-input>
    </ion-item>

    <ion-item>
      <ion-label floating>DOB</ion-label>
      <ion-datetime displayFormat="MMM DD, YYYY" [(ngModel)]="myDate" required></ion-datetime>
    </ion-item>

    <ion-item>
      <ion-label floating>Preferred Payment</ion-label>
        <ion-select [(ngModel)]="preferPay" required>
          <ion-option>NEFT / RTGS / IMPS</ion-option>
          <ion-option>Debit / Credit</ion-option>
          <ion-option>Net Banking</ion-option>
        </ion-select>
    </ion-item>

    <ion-item>
      <ion-label floating>Primary Category</ion-label>
        <ion-select [(ngModel)]="category" required>
          <ion-option>Two Wheeler</ion-option>
          <ion-option>Three Wheeler</ion-option>
          <ion-option>Four Wheeler</ion-option>
        </ion-select>
    </ion-item>

    <ion-item>
      <ion-label floating>Sales Person Id</ion-label>
      <ion-input type="number" [(ngModel)]="salesId"></ion-input>
    </ion-item>

  </ion-list>

  <ion-list class="lis2"> 

    <ion-row class="com"><p>Company Details</p></ion-row>

      <ion-item>
        <ion-label floating>Company Name</ion-label>
        <ion-input type="text" [(ngModel)]="comName" maxlength="64" required></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Company Formation Day</ion-label>
        <ion-input type="text" [(ngModel)]="comDay"></ion-input>
      </ion-item>

      <ion-row>
        <ion-item >
          <ion-label floating>TIN/GRN NO</ion-label>
            <ion-select [(ngModel)]="num" required>
              <ion-option *ngFor="let nom of list" value="{{nom.value}}" checked="{{nom.checked}}" >{{nom.text}}</ion-option>
            </ion-select>
        </ion-item>

        <ion-item *ngIf="num == 1 || num == 2">
           <ion-label floating>Number</ion-label> 
           <ion-input type="text" [(ngModel)]="num1" required></ion-input>
        </ion-item>
      </ion-row>

      <ion-item>
        <ion-label floating>Alternate Telephone</ion-label>
        <ion-input type="number" [(ngModel)]="altTelNumber" minlength="10" maxlength="10"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Fax</ion-label>
        <ion-input type="number" [(ngModel)]="faxNum" minlength="12" maxlength="12" required></ion-input>
      </ion-item>
  </ion-list>

  <ion-list class="lis3">
   <ion-row class="add"><p>Address</p></ion-row>
      <ion-item>
        <ion-label floating>Address1</ion-label>
        <ion-input type="text" [(ngModel)]="add1" maxlength="64" required></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Address2</ion-label>
        <ion-input type="text" [(ngModel)]="add2"></ion-input>
      </ion-item>

      <ion-row>

        <ion-item width-50 >
          <ion-label floating>Town/City</ion-label>
          <ion-input type="text" [(ngModel)]="townRcity" maxlength="64"required></ion-input>
        </ion-item>

        <ion-item width-50>
          <ion-label floating>State</ion-label>
            <ion-select [(ngModel)]="states" required>
              <ion-option *ngFor="let item of optionsList" value="{{item.value}}" checked="{{item.checked}}">{{item.text}}</ion-option>
            </ion-select>
        </ion-item>
      </ion-row>

      <ion-row>

        <ion-item width-50>
          <ion-label floating>Country</ion-label>
            <ion-select [(ngModel)]="countrys" required>
              <ion-option>{{country}}</ion-option>
            </ion-select>
        </ion-item>

        <ion-item width-50  >
          <ion-label floating>Pin</ion-label>
          <ion-input type="number" [(ngModel)]="pinNum"  maxlength="6"  minlength="6" required></ion-input>
        </ion-item> 
      </ion-row>

    </ion-list>
  </ion-list>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <button primary full (click)="register()">Register</button>
  </ion-toolbar>
</ion-footer>

ts文件：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AutoSparesPersistence } from '../../providers/persistence/autosparesPersistence';
import {Logger} from '../../providers/logger/logger';
import {Users} from '../../providers/commerce/users';
import {Rest} from '../../providers/network/rest';
import {HomePage} from '../home/home';

/*
  Generated class for the RegistrationPage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  templateUrl: 'build/pages/registration/registration.html',
  providers: [Users]
})
export class RegistrationPage {
    public country;
    state: number;
  optionsList: Array<{ value: number, text: string, checked: boolean }> = [];
  num = '';
  list: Array<{ value: number, text: string, checked: boolean }> = [];

  public firstName = "";
  public lastName = "";
  public email = "";
  public phoneNo = "";
  public myDate = "";
  public preferPay = "";
  public category = "";
  public salesId = "";
  public comName = "";
  public comDay = "";
  // public num = "";
  public num1 = "";
  public altTelNumber = "";
  public faxNum = "";
  public add1 = "";
  public add2 = "";
  public townRcity = "";
  public states = "";
  public countrys = "";
  public pinNum = "";


  // public registrationForm: any;
  public registrationDetails : any;


  constructor(private navCtrl: NavController, private persistence: AutoSparesPersistence,
    private rest: Rest, private logger: Logger, private user:Users) {
      this.country='India';
        this.optionsList.push({ value: 1, text: 'Andhra Pradesh', checked: false });
        this.optionsList.push({ value: 2, text: 'Telangana', checked: false });
        this.optionsList.push({ value: 3, text: 'Tamilnadu', checked: false });
        this.optionsList.push({ value: 4, text: 'Karnataka', checked: false });
      this.list.push({ value: 1, text: 'TIN NO', checked: false  });
      this.list.push({ value: 2, text: 'GRN NO' , checked: false });

  }

  register() {
      var _this= this;
    this.logger.info("invoking registeration FN");

    var registrationDetails = {
      firstName: this.firstName,
      lastName: this.lastName,
      email: this.email,
      phoneNo: this.phoneNo,
      myDate: this.myDate,
      preferPay: this.preferPay,
      category: this.category,
      salesId: this.salesId,
      comName: this.comName,
      comDay: this.comDay,
      num: this.num,
      num1: this.num1,
      altTelNumber: this.altTelNumber,
      faxNum: this.faxNum,
      add1: this.add1,
      add2: this.add2,
      townRcity: this.townRcity,
      states: this.state,
      countrys: this.country,
      pinNum: this.pinNum
    }

    this.user.registerNewUser(registrationDetails, function(result,data){
      if(result  == '1'){
        var _dataObj = JSON.parse(data);
        _this.rest.setAuthToken(_dataObj.userId, _dataObj.authToken);
        _this.persistence.setLoginDetails(_dataObj.userId, _this.email, _dataObj.passwd);
        _this.navCtrl.setRoot(HomePage);
      }
      else {
        alert(data);
      }

    })
  }
}