几点说明：

1. angular2内置了一些常见的验证器，required(必填)，maxlength(最大长度),minlength(最小长度),max(最大值),min(最小值),pattern(正则表达式)...等等，我们可以直接使用它。
2. 我们可以通过模板引用变量#name="ngModel"引用ngModel指令，来获该元素的验证信息，从而做相应的验证提示。
3. *ngIf="name.invalid && (name.dirty || name.touched || form.submitted)"，这里表示当name为脏值或者已经被访问过或者表单已经提交了，name值仍然无效时，显示错误信息，详细的状态说明可参考通过 ngModel 跟踪修改状态与有效性验证。
4. 当元素验证失败时，我们可以通过errors属性获取具体是那一项验证没有通过，如：*ngIf="name.errors.required"，表示如果errors上存在required属性，表明用户没有输入。

自定义同步验证器

假设我们需要一个可以指定验证规则的密码验证器。
password.validator.ts

import { AbstractControl, NG_VALIDATORS, Validator } from '@angular/forms';
import {Directive, Input} from '@angular/core'

@Directive({
    selector:'[password]',
    PRoviders: [{provide: NG_VALIDATORS, useExisting: PasswrodDirective, multi: true}]
})
export class PasswrodDirective implements Validator{
    @Input()
    password:string;
    
    validate(control:AbstractControl) {
        let error = null;
        if (this.password) {
            const reg = new RegExp(this.password, 'i');
            if (!reg.test(control.value)) {
                error = {
                    password:control.value
                }
            }
        }
        return error;
    }
}

在模板中使用

<input type="password" name="password" ngModel password="^[0-9]{6,12}$" #password="ngModel">
    <div class="error" [style.color]="'red'" *ngIf="password.invalid && (password.dirty || password.touched || form.submitted)">
      <p *ngIf="password.errors.password">password is illegal!</p>
    </div>

几点说明：

1. 验证器的本质就是一个属性型指令。
2. angular2内置的验证器都是绑定在NG_VALIDATORS上的，我们可以通过设置providers属性对其进行扩展。
3. 我们通过@Input()给指令添加了一个输入参数，这样我们可以指定验证规则了。
4. 该指令的类实现了Validator接口，需要实现validate这个方法。validate方法接收一个AbstractControl类型的参数control,我们可以通过control.value获取到需要校验的值。validate方法返回null表示验证成功，返回对象（这个例子中是：{password:'test'}）表示验证失败，返回的错误对象的属性会被添加到errors对象中。

自定义异步验证器

假设我们需要一个可以验证用户名是否重复的验证器。
name.validator.ts

import { AbstractControl, AsyncValidator, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { Directive } from '@angular/core';

const userList = [
    'jack',
    'mary',
    'jimi',
    'tom'
];

@Directive({
    selector:'[checkName]',
    providers: [{provide: NG_ASYNC_VALIDATORS, useExisting: CheckNameDirective, multi: true}]
})
export class CheckNameDirective implements AsyncValidator{

    validate(control:AbstractControl) {
        console.log(control);
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (userList.indexOf(control.value) >= 0) {
                    resolve({
                        'checkName':control.value
                    });
                } else {
                    resolve(null);
                }
            }, 2000)
        });
    }
}

在模板中使用