ionic 3 EmailValidator 用法

Question

我正在使用最新的离子框架，我看到 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
    }

}

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').

显示错误消息

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

ionic 3 EmailValidator 用法

ionic 3 EmailValidator usage

email-validation

ionic-framework

ionic3

angular