Angular的表单验证与ng-model

最新推荐文章于 2022-12-19 16:19:28 发布

suanday_sunny

最新推荐文章于 2022-12-19 16:19:28 发布

阅读量606

点赞数

构建一个ng表单

确保form和input标签有name属性，form最好再加novalidate属性
form中不能有action属性。提交交由ng-submit处理
每个input一定要有ng-model，然后用required或者ng-minlength之类才起作用

<input type="email" ng-model="user.name" ng-minlength="5" ng-maxlength="20" ng-pattern="/a-zA-Z/">

ng-model的作用:

数据双向绑定
- 对于checkbox框,ng-model值为true/false,可以通过设置 ng-ture-value='true的值' 和 ng-false-value='false的值' 改变本为true和false的返回值
- 对于radio和select,都是选中者的value

验证输入

ng-model 指令为应用数据提供了以下状态值:
$touched 通过触屏点击
$error 非法详情
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录
angular中可以直接通过formname.inputname.property或者formname.property访问对应状态值:

<form ng-app="" name="myForm" ng-init="myText = 'test@runoob.com'" novalidate>

Email:
<input type="email" name="myAddress" ng-model="myText" ng-minlength="5" required>
    <div ng-show='myForm.myAddress.$error.required'>请输入内容</div>
    <div ng-show='myForm.myAddress.$error.email'>请输入正确的邮箱</div>
    <div ng-show='myForm.myAddress.$error.minlength'>请输入正确的长度</div>
<p>编辑邮箱地址，查看状态的改变。</p>
<h1>状态</h1>
<div style="color:red" ng-show="myForm.myAddress.$dirty && myForm.myAddress.$invalid">
  警告警告
</div>
<p>Valid: {{myForm.myAddress.$valid}} (如果输入的值是合法的则为 true)。</p><p>Dirty: {{myForm.myAddress.$dirty}} (如果值改变则为 true)。</p>
<p>Touched: {{myForm.myAddress.$touched}} (如果通过触屏点击则为 true)。</p>

</form>

ng-model 指令基于它们的状态为 HTML 元素提供了 CSS 类：

ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid //输入合法(即无$error,包括required,email等都通过)
ng-invalid
ng-dirty //表单内容有填写记录
ng-pending
ng-pristine//表单内容无填写记录

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
    输入你的名字:
    <input name="myAddress" ng-model="text" required>
</form>

作者：李霖弢
链接：https://www.jianshu.com/p/bde2d6cc3695
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

suanday_sunny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular的表单验证与ng-model

构建一个ng表单确保form和input标签有name属性，form最好再加novalidate属性 form中不能有action属性。提交交由ng-submit处理每个input一定要有ng-model，然后用required或者ng-minlength之类才起作用<input type="email" ng-model="user.name" ng-minlength="5...
复制链接

扫一扫