我希望验证电子邮件并选择标签，如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);
}
})
}
}