@H_404_0@本文主要给大家介绍如何判断验证器的结果。在这里，我们就来看看怎样实现一个自定义的验证器。
@H_4040@
目标
@H404_0@我们要实现一个验证手机号的验证器，使用的实例还是基于之前的文章里面的实例，也就是用户信息输入的表单页面。我们在手机号的元素上添加一个验证手机号的验证器。然后，如果手机号验证失败，就显示一个错误，页面如下：
实现验证器
@H_404_0@在Angular2中，实现一个验证器非常简单，就是一个方法就可以，该方法的参数是一个FormControl，结果是一个错误对象或者null。用TypeScript接口表示，就是这样： {
(c:T): {[error: string]:any};
}
@H_404_0@如果是对类似Java这样的面向对象语言比较了解的话，上面的接口定义就很容易理解。其中required">必须输入电话
@H_404_0@userForm.controls.mobile就是表单中手机号这个控件，required是required验证器对应的key，当required验证器验证失败时，就会在errors里面添加一个值：
required: {valid: false}
}
@H_404_0@所以，我们实现的自定义的验证器，也要把验证结果用验证器的名字作为key，放到errors里面，就是这样：
在模型驱动的表单里添加验证器
@H_404_0@接下来，我们把我们实现的验证器添加到我们的表单里，先加到模型驱动的表单里：required,Validators.minLength(11),Validators.maxLength(11),validateMobile]]
});
...
}
@H_404_0@上面的代码省略了其他的部分，完整的代码，请参考github。
@H_404_0@在上面的代码中，我们引入了之前实现的自定义的验证器，然后在表单控件创建代码中，对mobile控件加了一个validateMobile。
@H_404_0@这样，我们在页面上添加相应的验证结果信息：
在模板驱动的表单里添加验证器
@H_404_0@但是，如果我们的表单不是在组件里用模型驱动的方式创建的，而是在页面上用html元素创建的，那么使用自定义的验证器就稍微麻烦一点。 @H_404_0@在一个模板驱动的表单里，我们是这样使用验证器的：required minlength="11" maxlength="11">
@H_404_0@也就是在input输入元素的属性中添加验证器。那么，我们要实现自己的验证器在表单里面使用，除了上面的验证器方法里面，还需要2件事情：
@H_404_0@我们需要将这个验证器定义成一个指令Directive，这样Angular在解析这段html的时候，会识别我们自定义的验证器指令。
我们还需要Angular的验证器调用我们的验证方法。
所以，在之前的mobile.validator.ts文件里，添加下面的指令定义：
required">必须输入姓名
required">必须输入姓名
