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

离子3 EmailValidator用法

1 个答案: