(九)4模板式表单校验

语法昂长,不方便逻辑控制(真正项目,不推荐使用,只适合简单的逻辑场景)

步骤,将校验器包装成一个指令
1.先通过cli生成一个指令
ng g d 文件路径或指令名

image.png

2.改名字,添加注入,

image.png
providers:[{provide: NG_VALIDATORS,userValue:mobileValidator,multi:true}]

模板式表单校验,规定了他的token是NG_VALIDATORS,通过添加multi:true,可以让他添加多个userValue
在这之前,angular有他自己的默认校验方法

image.png

3.验证保单是否通过,可以使用事件绑定传虚参

image.png
image.png

4.错误信息的提示----模板新写法

image.png

5.模板表单状态字段
在input上添加事件绑定

image.png

控制器写法

image.png

错误提示的语法,直接属性绑定

image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 版本:Angular 5.0.0-alpha 表单是商业应用的支柱,我们用它来执行登录、求助、下单、预订机票、安排...
    soojade阅读 5,055评论 0 1
  • 细说 Angular 2+ 的表单(二):响应式表单 摘要 在企业应用开发时,表单是一个躲不过去的事情,和面向消费...
    接灰的电子产品阅读 11,090评论 8 28
  • AngularJS是什么?AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是...
    200813阅读 5,581评论 0 3
  • 一如往常,我俯瞰楼下的庭院。没有人,没有刺眼的阳光。有微风,有小蜘蛛,风中飘荡,落到我手心。 “日子如此平常,小蜘...
    陈果_周绿阅读 1,049评论 0 1
  • 1. 被誉为安庆后花园的洪铺镇,无疑是美丽着的---三面环山,一面临水,独特的半丘陵浅...
    余生有爱阅读 4,183评论 0 3

友情链接更多精彩内容