Я рыба в AngularJS, и у меня есть этот сценарий.
<form>
<input type="text">
</form>
<button type="submit">submit</button>
В обычном порядке AngularJS предоставляет директиву ng-submit работать как атрибут в форме, но мне нужно вызвать его снаружи.
Итак, кто-то испытал ту же проблему? Если да, что вы сделали?
Пожалуйста, объедините свой код с помощью ng-контроллера и используйте ng-click на кнопках из области <form> .
Я делаю образец на jsfiddle для вас... попробуйте:
<div ng-app>
<div ng-controller="Ctrl">
<form ng-submit="submit()">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>
<button ng-click="submit()">Submit 2</button>
</div>
</div>
с js:
function Ctrl($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function () {
if ($scope.text) {
$scope.list.push($scope.text);
$scope.text = '';
}
};
}
Используйте атрибут HTML5 form, здесь образец:
angular.module('app', [])
.controller('MyCtrl', ['$scope', function($scope) {
$scope.submitted = false;
$scope.confirm = function() {
$scope.submitted = true;
};
}]);form {
padding:5px;
border: 1px solid black
}<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-controller="MyCtrl">
<form id="myform" ng-submit="confirm()">
<label for="myinput">My Input</label>
<input type="text" id="myinput" name="myinput">
</form>
<br>
<input type="submit" value="Submit" form="myform">
<p ng-show="submitted">
The form was submitted
</p>
</body>
</html>Это, безусловно, самое чистое решение, которое я нашел, все кредиты идут на @Offereins fooobar.com/questions/37988/...
<form ng-submit="vm.submit()">
<input type="text" name="name" />
<input type="submit" id="submit-form" class="hidden" />
</form>
<label for="submit-form">
<button type="submit">submit</button>
</label>
Этот метод не требует каких-либо дополнительных контроллеров JS или других настроек jQuery.
Angular 2
Для тех, кто хочет получить то же самое с Angular 2, ngForm предоставляет излучатель событий, который вы можете использовать.
https://angular.io/docs/ts/latest/api/common/index/NgForm-directive.html
<form role="form" (ngSubmit)="onSubmit()" #myForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input autofocus type="text" ngControl="name" #name="ngForm" class="form-control" id="name" placeholder="Name">
<div [hidden]="name.valid || name.pristine" class="alert alert-danger">
Name is required
</div>
</div>
</form>
<button type="submit" class="btn btn-primary" (click)="myForm.ngSubmit.emit()">Add</button>
Вы также можете выполнить тот же самый выброс из вашего файла ts/js вашего компонента
Вот мой тестовый код. Контроллер, у которого есть метод входа в систему, уже вызывается!
<form ng-submit="login()" id="form-test" name="formTest">
<input type="text" name="username">
<br>
<input type="password" name="userpass">
<br>
<!-- works -->
<input type="submit" value="submit inside" id="test">
</form>
<!-- change the path from /#/login to /?username=aaa&userpass=aaa#/login and reloads the page-->
<button type="submit" onclick="$('#form-test').submit();">submit outside (jquery)</button>
<!-- doesn't work -->
<button type="submit" ng-click="formTest.submit()">submit outside (ng-click)</button>
Все замечательные ответы, но решение uber, со всеми вашими вариантами: http://plnkr.co/edit/VWH1gVXjP2W9T9esnVZP?p=preview
<form ng-submit="submit()" name="jForm" id="jForm" onsubmit="event.returnValue = false; return false;">
<input type="text" class="form-control" placeholder="try to hit the enter key in here" />
<div class="btn btn-default" id="tap">
Tap me
</div>
<div ui-submit="" class="btn btn-primary">Submit form</div>
</form>
<ui-submitform class="btn btn-primary" formsubmitfunction="submit()">Submit form 2</ui-submitform>
<button onclick="$('#jForm').submit()">jquery Submit</button>
и расширяя @m-k и расчесывая идеи из @joaozito-polo:
app.directive('uiSubmitform', function()
{
// need this to make sure that you can submit your form by simply pressing the enter key in one of the input fields
return {
restrict: 'E',
link: function(scope, element, attrs)
{
element.onTrigger(function()
{
//scope.$apply(attrs.formsubmitfunction);
scope.$eval(attrs.formsubmitfunction);
});
}
};
});
Короткий ответ Посмотрите http://jsfiddle.net/84bodm5p/
Самый простой способ создать специальную директиву для внешнего представления.
Важно только использовать правильное событие .triggerHandler('submit') в элементе формы
$scope.$on('makeSubmit', function(event, data){
if(data.formName === $attr.name) {
$timeout(function() {
$el.triggerHandler('submit'); //<<< This is Important
//equivalent with native event
//$el[0].dispatchEvent(new Event('submit'))
}, 0, false);
}
})
Посмотрите на мой ответ здесь Как запускать форму submit программно в AngularJS?
Если вы ищете дескриптор представленного состояния формы: В функции ng-click просто добавьте vm.formName. $SetSubmitted();
ng-click="vm.formName.$setSubmitted(); vm.submit()"
Есть решение, которое работает для меня:
http://jsbin.com/ODaFaGU/3/edit
Проверьте ЧАСТЬ 2 и ЧАСТЬ 3.
Внутри есть два решения.
Один для обычных кнопок отправки формы - позволяет вам нажимать кнопки без задержки, но также гарантирует, что нажатие клавиши "enter" в любом из полей формы вызовет отправку.
Во-вторых, есть дополнительный eventHandler, который объединяет события click, tap и keydown [enter] в один - это гарантирует, что вы можете нанести удар по вашим элементам управления также с помощью клавиатуры, как с щелчком на рабочем столе, так и с помощью крана на мобильных устройствах (без двойного щелчка).
Если у вас есть проблемы с этим, дайте мне комментарий, я исправлю его.
В Angular вы не отправляете формы (ну, по крайней мере, в Angular). Вам просто нужна функция, которая будет делать то, что вы хотите сделать, когда вы заполните форму.
Просто вызовите эту функцию в <button>, и вы готовы к работе.
Пример: plunker