ng-submit和ng-click之间的区别
在angularjs中,我想知道ng-submit和ng-click之间的区别是什么? 具体来说,每个人的利弊,你应该什么时候该做什么? 谢谢!
**编辑**
我已经看了这个多一点,但我仍然想知道什么(如果有的话)的好处是使用ng-submit? 你可以使用ng-click代替所有ng-submits吗? 这会造成什么问题吗? 再次感谢!
ngSubmit指令绑定到浏览器中的提交事件 ,当提交表单时会触发提交事件 。
来自MDN:
请注意,仅在表单元素上触发提交,而不是button或提交input。 (表单被提交,而不是button。)
所以你可以用它来提交一个用户registry单,或者类似的东西。
另一方面,ngClick指令可以应用于任何types的元素。
来源 :
ngClick指令允许您指定单击元素时的自定义行为。
使用它可以让用户以不同于提交表单的方式与您的页面进行交互。 也许点击“上一个”或“下一个”寻呼机button,或者地图或其他东西。
Angular阻止默认操作(表单提交到服务器),除非元素具有指定的动作 , 数据操作或x-action属性。所以当使用带有不带这些属性的forms的angular度时,可以使用ng-click和ng-submit来指定要调用哪个javascript方法。无论是哪种调用,都可以通过angular的双向数据绑定属性来获取作用域中的所有input值。 你可以使用ng-click代替所有ng-submits吗? 这会造成什么问题吗?
它可以使用,但是当使用ng-click时,它不会将htmlinput属性(如required,min-max,maxlength)考虑在内,并立即执行方法体。
我最喜欢使用ng-submit
原因是,它允许你按下<Enter>
键,同时关注表单input等,表单将提交。 (当然,假设你在表单中有一个type="submit"
的button)。
它的键盘友好性和可访问性比ng-click
button更友好,因为使用ng-submit
,用户可以点击提交button或按<Enter>
。
如果我们希望表单在无效时不被提交,那么我们将不使用ng键来单击button,而是使用表单本身的ng-submit指令
<div class="row"> <form name="adduser" ng-submit="AddUser(adduser.$valid)"> <div id="name-group" class="form-group-lg"> <input type="text" required name="name" ng-model="userfullName" class="form-control" placeholder="Full Name"> </div>
在ng-submit中,我们使用参数formname。$ valid从控制器调用一个函数AddUser。 这个提交函数只有在表单有效或换句话说,表单的所有用户input都是有效的时才被调用。 请记住,在这种情况下,如果表格无效,则不会提交
当我们使用ng-click时,表格即使无效也会被提交。 两个ng-click的观察如下:
即使表单无效,我们也能够提交表单。对于无效input,控制器中的值被设置为undefined
ng-submit与表单关联,当你提交表单的时候这个事件会触发。 ng-click在没有表单提交事件的情况下可以工作