AngularJS表单详解及示例代码

AngularJS提供丰富填写表单和验证。我们可以用尼日利亚点击来处理AngularJS点击按钮事件，然后使用$脏和$无效标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。表单控件使用了大量的角活动。让我们快速浏览一下有关事件先。

事件

AngularJS提供可与超文本标记语言控件相关联的多个事件。例如尼日利亚点击通常与按钮相关联。以下是AngularJS支持的事件。

尼日利亚点击

ng-dbl-点击

ng-mousedown

ng-mouseup

ng-mouseenter

ng-mouseleave

ng-mousemove

尼日利亚鼠标悬停

ng-keydown

ng-keyup

ng-按键

ng-change

尼日利亚点击

使用点击一个按钮的指令，表单重置数据。

输入名称='名字'类型='text' ng-model='firstName '要求输入名称='lastname '类型='text' ng-model='lastName '要求输入名称='电子邮件'类型='email' ng-model='email '要求输入按钮ng-click=' Reset()'重置/按钮脚本函数student controller($ scope){ $ scope。Reset=function(){ $ scope。名字=' Mahesh$ scope . last name=' Parashar $ scope。email='[email protected]'；} $ scope。reset()；}/脚本验证数据

可使用下面跟踪误差。

$肮脏-规定值已被改变。

$无效-该值的状态是无效的。

$错误-指出确切的错误。

例子

下面的例子将展示上述所有指令。

testAngularJS.html

html标题角形JS表单/标题样式表，th，td { border: 1px纯灰色；边界崩溃：崩溃；padding: 5px }表tr : th-child(奇数){底色： # f2f2}表tr : th-child(偶数){底色： # ffffff}/style/headdy H2 angular js示例应用程序/H2 div ng-app=' ng-controller=' studentController '表单名称=' studentForm '新可扩展边框=' 0 ' TRT输入名字：/TDT输入名字='名字'类型='文本'类型='名字'必需span style=' color : red ' ng-show=' student form。名字。$脏学生表单。名字。$无效span-show=' studentForm '/span/span/TD/TRT输入姓氏：/TDT输入名称='姓氏'类型='文本'类型='姓氏'必需span style=' color : red ' ng-show=' student form。姓氏。$脏学生表单。姓氏。$无效span ng-show=' studentform。姓氏。$错误。必需'姓氏是必需的/span/span/TD/TRT email :/TDT输入名称=' email '类型=' email ' ng-model=' email '长度=' 100 '所需span样式=' color : red ' ng-show=' student form。电子邮件。$脏学生表单。电子邮件。$无效的“span ng-show=”student form。电子邮件。$错误。“必填”电子邮件是必需的/span span ng-show=' studentform。电子邮件。$错误。电子邮件无效的电子邮件地址点击='重置()'重置/按钮/禁用按钮='学生表单。名字。$脏学生表单。名字。$无效| | studentform。姓氏。$脏学生表单。姓氏。$无效| | studentform。电子邮件。$脏学生表单。电子邮件。$无效ng-click=' Submit()' Submit/button/TD/tr/table/form/div脚本函数studentController($ scope){ $ scope。reset=function(){ $ scope $ scope . last name=' Parashar $ scope。email='[email protected]'；} $ scope。reset()；}/script script src=' http :http://Ajax。谷歌API。com/Ajax/libs/angular js/1。2 .15/棱角分明。量滴js '/脚本/正文/html输出

在网浏览器打开textAngularJS.html。看到结果如下。

以上就是AngularJS表单的知识整理，后续继续补充相关知识，谢谢大家对本站的支持！