angular表单校验

 

上面的代码段就是校验代码，写在一个单独的文件中，并暴露出去，用于外部进行调用。

 

由下面的代码可知：使用的是响应式表单。

下面就是ts代码中对校验代码进行调用，调用的方法如下所示这就是使用FormBuilder的好处，可以方便的添加自己写好的校验器。

 

 

上面都是在讨论响应式表单校验。

 

下面讨论在模板式表单中，怎样校验？

要在模板式表单中进行校验，需要用指令，像模板式表单中的ngFor就是指令，校验需要的指令需要我们自己去写，如何写？写ts代码，首先用angular命令生成指令代码段，在代码段中写校验的逻辑，再把指令代码段当作指令写在模板中。

用angular命令生成指令代码段：

ng g derective  directives/mobilevalidater

可以简单把指令代码段理解为没有模板的组件。

下面是生成的指令代码段案例：

 

[equal]中的equal就是指令的名字，可以直接写在模板中的。providers提供器中的provide:NG_VALIDATORS为一个不变的token，NG_VALIDATORS是angular提供的一个常量，都是这种写法。usevalue:后的值为ts代码块中的校验方法，这样就把一个校验方法封装成了一个指令。