使用Angular的简单提交表单

Question

我是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 
});

Answer 1

你可以有ng-submit指令form,当你点击提交按钮时,它会调用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);
        })
     }
  }
})

更新2 Plunkr