发表于: 2017-04-25 21:28:04

1 1057


今天完成的事情:继续昨天的进度,学习如何给任务5的页面form标签添加验证,昨晚已经查看过一些,今天感觉帖子上写的都大同小异,所以就在菜鸟教程中找到了一个简单的例子,然后自己做demo,摸索其中实现的步骤,再然后对比demo写任务5表单验证的正式代码。最终完成了表单验证,但是目前没有添加正则表达式,以后专门学习时再做添加。下午调整了上午表单验证时遇到的两个bug,开始跳转页面,但是跳转后从后台的数据没有了,怎么在新页面获得后台接口的数据还是不太懂。后来在菜鸟教程中认识了一下ng-repeat方法的知识。

明天计划的事情:学习如何在新页面获得接口的数据并使用ng-repeat方法实现页面的渲染。

遇到的问题:

 第一个,如何实现表单验证,网上找了很多的帖子,有的说要使用angular-message.js才能实现,有的说不用也可以,云里雾里的。后来干脆在菜鸟教程中找到了一个相对简单,可以很快理解的例子进行demo,一个个代码进行删增学习怎么实现验证,警告提示的文字怎么出现。然后调整了任务5的html文件,添加了一些p标签,按照学到的demo中的方法,给任务5添加相关的代码,进过进一步的调整才实现了验证。

 第二个,在表单验证的过程中,发现在没有输入任何内容时点击按钮也会起作用,返回相关的值。这个肯定不行,按理按钮是要先被禁止点击的。所以就去找怎么实现呢,简单地按照html的方法当然好实现的,但怎么配合angular呢?后来找到了$dirty、$valid、$invalid、$pristine这四种方法,很有用,在按钮中添加ng-disabled,在其后赋予四种中相关的属性值就可以。

 第三个,在修改上边的bug后,又发现一个问题,输入框中的字符长度设置了限制,但只要有写,验证不通过,点击按钮也会发送数据,这也是不对的。怎么办呢?得让验证正确后才能点击呀,现在还的静止。后来就查到$error的方法,但不管怎么调整都不行,要么一直禁止,要么还是以前的问题还存在。下午才找到一个贴子上说使用一段代码可以防止这个问题,最后只是在按钮中添加了一段属性代码就解决这个问题了:ng-disabled="myForm.$invalid"。

 第四个,怎么实现跳转到新页面后获得后台数据呢?现在还没想到如何实现。

收获:学会了简单的表单验证。


返回列表 返回列表
评论

    分享到