离子型使用开发表单验证（模板验证)

一什么是模板验证

顾名思义模板验证就是通过一些开发的属性来在超文本标记语言标签中验证，为了往模板驱动表单中添加验证机制，你要添加一些验证属性，就像原生的超文本标记语言表单验证器棱角分明。会用指令来匹配这些具有验证功能的指令。每当表单控件中的值发生变化时棱角分明就会进行验证，并生成一个验证错误的列表（对应着病人状态)或者null(对应着有效的状态)。

2示例

这是我写的一个小演示，这种验证方式无需写射流研究…代码全部在标签里使用开发的属性，其他地方也无需引入角形库，因为离子的会自动默认引入。

标题[title]=' title '/标题离子-内容滚动='false '！-form-ion-item ion-input type=' text ' class=' form-control ' name=' username ' # username=' ngModel '必需maxlength=' 10 '分钟长度=' 6 '占位符='用户名[(ng型号)]='用户。username '/ion-input/ion-item pahdasidashdudi/p ion-item ion-input类型=' password ' class=' form-control ' name=' password ' # password=' ng model '必填maxlength=' 16 '最小长度=' 6 '占位符='密码[(n型号)]='用户。密码输入项标签记住密码/ion-label ion-toggle[(ng model)]='意大利香肠/离子-切换/离子-项目按钮离子按钮块(单击)='login()'登录/按钮离子-项目按钮离子-按钮图标-开始轮廓（单击)='goRegistered()'去注册/按钮按钮离子-按钮图标-结束轮廓忘记密码/button/ion-item h1 class='错误消息“{提示消息} }/h1 span * ngIf=' username。无效的(用户名。脏| |用户名。touch)' class='错误消息'用户名必须为6到10位/span span * Ngif='密码。无效的(密码。脏| |密码。touch)' class='错误消息'密码必须为6-16位/span！-/形式/离子含量运行效果如下：

3核心属性

可以看到[(ngModel)]='user.username '作用是绑定了我们在分时（同分时)文件中定义的变量。

# username=' ngModel '的作用是把我们绑定的模型值命名成用户名，变成了一个FormControl对象，这里不必纠结下节会讲。

需要验证是否为空maxlength='10 '最大长度minlength='6 '最小长度。这些都是我们需要验证的条件。

* NgiF=' username。无效的(用户名。脏| |用户名。触摸)

*ngIf标签等于真实的时将错误信息显示出来用户名。无效表示验证不合法返回真的，用户名。脏判断是否改变了这个参数的值，用户名。已触摸表示是否有碰过表单，作用在于，刚打开表单页面是，里面参数都是空的，但无需显示错误信息。

进入model.d.ts文件看到部分源码如下

/** *当控件的"状态===有效"时，该控件为"有效"。* *为了获得此状态，控件必须已经通过了所有的*验证检查*/readonly valid:布尔值；/** *当控件的"状态===无效"时，该控件为"无效"。* *为了获得此状态，控件必须至少有一次验证检查失败*/readonly无效：布尔值；有效的属性表示参数值校验后结果不通过为假的，通过为真的。

病人则表示参数值校验不通过为没错，通过为假的。

/** *如果用户在用户界面中更改了*值，则控件是"脏"的。* *请注意，对控件值的编程更改不会将它标记为脏*/readonly dirty:布尔值；/** *一旦用户在控件上触发*一个"模糊"事件，该控件就会被标记为"触摸"。*/readonly touched:布尔值；肮脏的表示你是否没有改变过这个参数的值

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。