[英]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
验证,但是将它的类型设置为button
那么使用ng-click
指令就可以看到下面的内容
标记
<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
}
但从技术上讲,我不喜欢这种方法,因为使用jQuery和make问题Angular摘要循环。
如果你真的想在表单中添加hidden
字段,那么我会将它们保留在form
上,而不是在提交表单之前动态添加它们。 并将使用ng-submit
指令。
为了填充这些隐藏的值,您可以使用带有范围变量的ng-value
指令。 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
。 在这种情况下,您不需要ng-submit。
标记
<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);
})
}
}
})
这里有一个例子:
<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>
和文件:
你只需用这个代替你的代码
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.