4

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

3 回答 3

6

你可以有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 来制作问题 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

于 2015-11-03T19:10:10.407 回答
0

这里有一个例子：

<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

于 2015-11-03T19:10:00.243 回答
0

你只需用这个替换你的代码

<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>

于 2015-11-03T19:26:23.567 回答