使用Angular的简单提交表单
Simple submit form using Angular
我是Angular的新手,但对谷歌很熟悉。
我无法找到如何使用Angular提交此表单,就像我们在jQuery中所做的那样。
<form>
<input type="text" />
<button type="button" class="saveDraft">Save Draft</button>
<button type="submit">Submit</button>
<form>
我想通过保存草稿按钮提交此表单,但不是通过普通的提交按钮。
jQuery我们使用
$('.saveDraft').click(function () {
$('form').submit(); // this will submit form
});
你可以在form
上有ng-submit
指令,当你点击提交按钮时,它会调用ng-submit
指令中提到的方法。
标记
<form name="myForm" ng-submit="submit()">
<input name="name" type="text" ng-model="name"/>
<button>Save Draft</button>
<button type="submit">Submit</button>
<form>
阅读此处了解表单如何在AngularJS中工作
更新1
如果您想对按钮click
进行验证,但使用ng-click
指令将其类型设置为button
,则如下所示
标记
<form name="myForm" ng-submit="submit()">
<input name="name" type="text" ng-model="name"/>
<button type="button" ng-click="manualSubmit()">Save Draft</button>
<button type="submit">Submit</button>
<form>
代码
$scope.manualSubmit = function(){
//do your the process of adding hidden fields.
//then submit a form
//if you don't want to submit on some cases then put it in condition block
$('form').submit(); // this will submit form
}
但从技术上讲,我不喜欢使用这种方法,因为使用带有make的jQuery问题角度摘要循环。
如果你真的想在表单中添加hidden
字段,那么我会将它们保留在form
本身上,而不是在提交表单之前动态添加。并且会使用ng-submit
指令。
为了填充这些隐藏值,可以使用ng-value
指令,其中包含scope变量。ng-value
指令将更新这些隐藏字段,假设scopeVariable
值从控制器更改,则会更新隐藏字段值。
<form name="myForm" ng-submit="submit()">
<input name="name" type="text" ng-model="name"/>
<input type="hidden" name="somehiddenfield" ng-value="scopeVariable"/>
<button>Save Draft</button>
<button type="submit">Submit</button>
<form>
更新2
根据注释,您希望使用angular手动提交表单,为此,您可以制定提交form
的指令。在这种情况下你不需要屈服。
标记
<button type="button" my-submit="callback()">Save Draft</button>
指令
app.directive('mySubmit', function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
element.on('click', function(event){
//do stuff before submitting
element.parent.submit(); //manually submitting form using angular
if(attrs.callback)
scope.$eval(attrs.callback);
})
}
}
})
更新2 Plunkr
这里有一个例子:
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{list}}</pre>
</form>
以及文档:
https://docs.angularjs.org/api/ng/directive/ngSubmit
您只需用这个替换代码
<form name="myForm" ng-submit="submit()" action=" name of other page" autocomplete="on">`
<input name="name" type="text" ng-model="name"/>
<button onClick="draft(this.form)">Save Draft</button>
<button type="submit" name="submit">Submit</button>
- Jquery提交表单而不刷新
- 如何在提交表单时将PHP变量传递到Javascript cookie中
- 每次提交表单时都会重新加载网页
- Razor中的自动提交表单
- 使用 JavaScript 自动提交表单
- 点击相同的按钮打开模型,然后提交表单
- 添加和删除隐藏字段数组中的值,而不提交表单
- 使用Ajax提交表单
- jQuery:使用“jQuery验证”后无法提交表单's远程验证
- 如何在不重新加载的情况下提交表单,并使用Node+Express将数据传递回同一页面
- 有登录表单时无法提交表单
- 带有select的jquery提交表单不起作用
- 如何防止回车键提交表单,但仍然允许回车工作
- 使用按钮和单选按钮提交表单,但始终使用相同的值
- 在提交表单之前确定重复值
- 如何创建动态ajax提交表单
- HTML提交表单,同时包含空字段检查和按钮隐藏
- 如何使用jQueryAjax使用动态html输入texbox提交表单
- 当触发下拉列表的onchange事件时,使用JavaScript提交表单
- 提交表单后,Watir文本框输入未持续(重置为以前的文本框输入)