angular表单校验

–>

angular表单校验

 

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

 

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

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

 

angular表单校验

 

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

 

下面讨论在模板式表单中,怎样校验?

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

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

ng g derective  directives/mobilevalidater

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

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

angular表单校验

 

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

 

本文来源 互联网收集,文章内容系作者个人观点,不代表 本站 对观点赞同或支持。如需转载,请注明文章来源,如您发现有涉嫌抄袭侵权的内容,请联系本站核实处理。

© 版权声明

相关文章