Простая форма отправки с использованием Angular

Question

Я новичок в Angular, но очень стар с Google.

Я не могу узнать, как отправить эту форму с помощью 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 problem.

Если вы действительно хотите добавить 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 Плункр

Answer 2

Вы просто замените свой код этим

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

Answer 3

Вот вам пример:

<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