ionic 3 EmailValidator 用法答案

【问题标题】：ionic 3 EmailValidator usageionic 3 EmailValidator 用法
【发布时间】：2017-08-09 09:50:27
【问题描述】：

我正在使用最新的 ionic 框架，我看到 angular 开发团队添加了 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
    }

}

【问题讨论】：

标签： angular ionic-framework ionic3 email-validation

【解决方案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') 显示错误消息。

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

【讨论】：