ionic 3 EmailValidatorの使用

Question

私は最新のイオンフレームワークを使用しています。私はその角度開発チームに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 
    } 

} 

Answer 1

私は、フォームを使用したいと思う、とあなたはテンプレート駆動型フォームを使用したいと思われるでしょう。フォームタグを追加して、フォームコントロールを登録し、潜在的なフォームエラーを確認して表示できるようにして、checkValidationメソッドを完全に冗長にすることができます。 :)

フォームタグを追加する必要があります。他に必要がない場合は、変数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> 

とボタンをsumbit無効には、多くの方法で行われ、エラーメッセージを表示する際に、例えば、フォームがあるときにすることができますdirty,touchedなど。 f.hasError('email','email')を実行して電子メールが有効でない場合、エラーメッセージを表示することができます。

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