ionic 3 EmailValidator用法

我使用最新的離子框架，我看到角開發團隊添加了EmailValidator功能。但我應該如何使用它有點不清楚。任何人都可以給我一個使用的例子嗎？ionic 3 EmailValidator用法

home.html的

<ion-content padding> 

    <ion-list> 

     <ion-item margin-vertical> 
      <ion-label>Enter email</ion-label> 
      <ion-input type="email" name="email" [(ngModel)]="email"></ion-input> 
     </ion-item> 

    </ion-list> 

    <button (type)="button" ion-button block large [disabled]="!email" (click)="checkValidation()">Check!</button> 

</ion-content>

home.ts

import { Component } from '@angular/core'; 
import { IonicPage } from 'ionic-angular'; 
import { EmailValidator } from '@angular/forms'; 

@IonicPage() 
@Component({ 
    selector: 'page-login', 
    templateUrl: 'home.html' 
}) 

export class LoginPage { 
    email: string; 

    constructor() {} 

    checkValidation() : string() { 
     // validation here 
    } 

}

來源

2017-08-09 Merge-pony

我想你想使用的形式，似乎要使用一個模板驅動的形式。因此，讓我們添加表單標籤，以及我們需要註冊表單控件並能夠檢查並顯示潛在的表單錯誤，以便我們可以擺脫那種完全多餘的方法！ :)

我們需要添加表格標籤，如果您不需要其他東西，我們也可以跳過變量email。表單生成的對象將包含該變量。

我們需要使用name屬性和ngModel，以便我們可以將其註冊爲表單控件。那麼我們需要模板參考和ngModel能夠檢查控制狀態，即它是否有效？然後，我們通過標記email輸入字段添加實際電子郵件方式確認：

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)"> 
    <ion-item margin-vertical> 
    <ion-label>Enter email</ion-label> 
    <ion-input type="email" name="email" #email="ngModel" ngModel email></ion-input> 
    </ion-item> 
    <button ion-button block large [disabled]="!f.valid" type="submit">Submit</button> 
</form>

隨着錯誤消息和禁止透過按鈕，可以通過多種方式來完成，而當顯示錯誤信息，例如，當窗體dirty，touched等等。在這裏，如果電子郵件無效，請通過f.hasError('email','email')顯示錯誤消息。

DEMO：http://plnkr.co/edit/xJVK2ZtyiQ055tEAA2F0?p=preview

來源

2017-08-09 15:33:31 Alex

ionic 3 EmailValidator用法

回答

相關問題