最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
ionic使用angularjs表单验证(模板验证)
时间:2022-06-25 15:26:48 编辑:袖梨 来源:一聚教程网
1什么是模板验证
顾名思义模板验证就是通过一些angularjs的属性来在html标签中验证,为了往模板驱动表单中添加验证机制,你要添加一些验证属性,就像原生的 HTML 表单验证器。 Angular 会用指令来匹配这些具有验证功能的指令。每当表单控件中的值发生变化时,Angular 就会进行验证,并生成一个验证错误的列表(对应着 INVALID 状态)或者 null(对应着 VALID 状态)。
2示例
这是我写的一个小demo,这种验证方式无需写js代码全部在标签 里使用angularjs的属性,其他地方也无需引入angular forms库,因为ionic会自动默认引入。
ahdasidhasidashdudi
记住密码 {{promptMessage}}
用户名必须为6到10位 密码必须为6-16位
运行效果如下:
3核心属性
可以看到[(ngModel)]="user.username"作用是绑定了我们在ts文件中定义的变量。
#username="ngModel"的作用是把我们绑定的模型值命名成username,变成了一个FormControl对象,这里不必纠结下节会讲。
required 验证是否为空 maxlength="10" 最大长度 minlength="6"最小长度。这些都是我们需要验证的条件。
*ngIf="username.invalid && (username.dirty || username.touched)"
*ngIf标签等于true时将错误信息显示出来username.invalid表示验证不合法返回true,username.dirty 判断是否改变了这个参数的值,username.touched表示是否有碰过表单,作用在于,刚打开表单页面是,里面参数都是空的,但无需显示错误信息。
进入model.d.ts文件看到部分源码如下
/** * A control is `valid` when its `status === VALID`. * * In order to have this status, the control must have passed all its * validation checks. */ readonly valid: boolean; /** * A control is `invalid` when its `status === INVALID`. * * In order to have this status, the control must have failed * at least one of its validation checks. */ readonly invalid: boolean;
valid属性表示参数值校验后结果不通过为false,通过为true。
invalid则表示参数值校验不通过为true,通过为false。
/** * A control is `dirty` if the user has changed the value * in the UI. * * Note that programmatic changes to a control's value will * *not* mark it dirty. */ readonly dirty: boolean; /** * A control is marked `touched` once the user has triggered * a `blur` event on it. */ readonly touched: boolean;
dirty表示你是否没有改变过这个参数的值
相关文章
- 王者荣耀侦探能力大测试攻略 王者荣耀侦探能力大测试怎么过 11-22
- 无期迷途主线前瞻兑换码是什么 11-22
- 原神欧洛伦怎么培养 11-22
- 炉石传说网易云音乐联动怎么玩 11-22
- 永劫无间手游确幸转盘怎么样 11-22
- 无期迷途主线前瞻兑换码是什么 无期迷途主线前瞻直播兑换码介绍 11-22