发表于: 2017-04-06 11:16:22

2 1244


今日完成:

1 日常任务:回复日报,复习相关。小课堂:echart图表插件。。

2 任务10:angular表单验证。使用ng-massage组件完成验证。

ng-massage组件使用过程:

》安装:npm-install angular-massage或者找到下载的angularjszip包,已经内置了,版本号于angular.js版本号相同。
》引用:angular-messages.js
》依赖注入:angular.module('app',['ngMessages'])

》可能需要用到的4种状态(变量),是angular 内置的,不需要注入,用到时直接用。

$dirty表单有填写记录
$valid字段内容合法的
$invalid字段内容是非法的
$pristine表单没有填写记录

它们返回布尔的true/faults.

》视图层:

1 input必须有form,并且input和input要添加name=""属性,使之可以被ng-massage引用。

<form name="addNewForm" novalidate>//第二个属性禁用了浏览器内置的验证
<input ng-model="name" type="text" name="name" required

2 给input添加需要验证的项目:ng-minlength等指令是angular内置的,符合则返回true,不符合返回faults

<input ng-model="name" type="text" name="name" required
      ng-minlength="2" ng-maxlength="5" ng-pattern="/^[\u4e00-\u9fa5]{2,5}$/"
>

如果一个项目不合法,会被传递到下文的massage中。

3 ng-massages和ng-massage引用对应input的name属性值,然后用ng-massages指令的元素 包裹ng-massage指令的元素。

用外层的ng-massages获取所有的错误的集合ng-messages="addNewForm.name.$error",


<p>{{ addNewForm.name.$error}}</p>


用内层的ng-massage获取单个需要在视图显示的错误,然后写上提示的文字。ng-massage指令接受的值是true/fautls,true则不显示此元素,faults则显示此元素。也就是在出错的时候才会显示。并且,如果有多个错误,将只显示第一个错误,而不是覆盖。使用ng-message-multiple替代ng-massage指令,可以显示多个错误,并占据多个元素空间。

<span ng-messages="addNewForm.name.$error" ng-if="addNewForm.name.$dirty" class="addNew-form-alert">
<span ng-message="required">这是必填项</span>
<span ng-message="minlength">最小长度:2</span>
<span ng-message="maxlength">最大长度:5</span>
<span ng-message="pattern">格式:2-5个汉字</span>
</span>

4 用外层的ng-if指令,指定此验证被触发的时机。

5 设置提交按钮,在表单存在错误的时候,将提交按钮禁用,用到$invalid变量,ng-disabled指令。$invalid变量监听对应的form是否存在不合法输入。存在的时候返回faults,不存在的时候返回true。


ng-disabled="addNewForm.$invalid">确认</button>



明日计划:

1 日常任务:回复日报,复习相关。

2 小课堂:echart图表插件,要写出demo,基本完成ppt

3 任务10 ,如果有时间,进行控制器的提交功能。

问题:

小课堂:echart图表插件有什么要说的吗?

收获:

ng-massage,用大半天的时间大体知道常规的用法了。




返回列表 返回列表
评论

    分享到