Я рыба в AngularJS, и у меня есть этот сценарий.AngularJS: Вызывайте событие ng-submit вне формы
<form>
<input type="text">
</form>
<button type="submit">submit</button>
В нормальных путях AngularJS обеспечивает нг-представить директиву для работы в качестве атрибута в форме, но мне нужно вызвать его на улице.
Итак, у кого-то была такая же проблема? Если да, что вы сделали?
Пожалуйста, окружать код с нг-контроллера, а также использование нг щелкните на кнопках из сферы < формы >.
я сделать пробу на 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>
с ЯШ:
function Ctrl($scope) {
$scope.list = [];
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.list.push($scope.text);
$scope.text = '';
}
};
}
Что делать, если мне нужно передать форму для целей проверки ?: '
@benoror, я бы использовал объект для хранения входных значений (ex : $ scope.data = {}) и использовать это на входе (ng-model = "data.text"), а затем я бы передал этот объект на функцию отправки: submit (data) –
фактически не нужно ставить
Вот мой тестовый код. Контроллер, у которого есть метод входа в систему, уже вызывается!
<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>
только 'представить inside', кажется, работает. –
В Угловом виде вы не представляете формы (ну, по крайней мере, угловым способом). Вам просто нужна функция, которая будет делать то, что вы хотите сделать, когда вы заполните форму.
Просто позвоните этой функции в свой <button>, и вы готовы к работе.
Пример: plunker
Этот пример не поможет, если вы хотите воспользоваться угловой проверкой. Угловая проверка прослушивает специально для запуска события. –
Существует решение, которое работает для меня:
http://jsbin.com/ODaFaGU/3/edit
Проверьте ЧАСТЬ 2 и ЧАСТЬ 3.
Внутри есть два решения.
Один для обычных кнопок отправки формы - позволяет вам нажимать кнопки без задержки, но также гарантирует, что нажатие клавиши «ввести» в любом из полей формы вызовет отправку.
Во-вторых, есть дополнительный eventHandler, который объединяет события щелчка, нажатия и keydown [enter] в один - это гарантирует, что вы можете нанести удар по своим элементам управления, а также клавиатурой, как с помощью щелчка на рабочем столе, так и нажмите на мобильном устройстве (без двойного щелчка).
Если у вас возникли проблемы с этим, дайте мне комментарий, я исправлю это.атрибут
Привет, это кажется путаницей для меня, потому что я новичок в угловой, поэтому я делюсь своей скрипкой, которая не может работать в IE-браузере. http://jsfiddle.net/premraj10/LADWU/2/ Основная проблема после редактирования строки не удается щелкнуть событие сохранения в браузерах IE. , пожалуйста, посмотрите и сообщите мне ваше решение. – Pawan
использовать 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>Это решение не поддерживается Internet Explorer http://caniuse.com/#feat=form-attribute –
Простейшее исправление. Сначала я не заметил, что форма = значение должна соответствовать идентификатору формы, а не названию формы (в случае, если она помогает кому-то другому). Он также может быть записан как: '' –
На сегодняшний день самое чистое решение – SasaT
Все великие ответы, но убер-решение, со всеми опциями выложенных: 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>
и продление @ mk и расчесывание идей от @ 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);
});
}
};
});
Это, безусловно, чистейший решение, которое я нашел, все кредиты идут на @Offereins https://stackoverflow.com/a/23456905/3819736
<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.
Не работает на IE/Edge http://caniuse.com/#search=for – TVH7
Угловое 2
Для тех, кто ищет, чтобы достигнуть того же самого с угловыми 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>
Вы также можете выполнить ту же самую Emit внутри вашего компонента ц/JS файл
Короткий ответ Посмотрите на 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);
}
})
Посмотрите на мой ответ здесь How to trigger form submit programmatically in AngularJS?
Если вы ищете ручку представляемую состояния формы: В Функция ng-click просто добавляет vm.formName. $ setSubmitted();
ng-click="vm.formName.$setSubmitted(); vm.submit()"
Я стараюсь оставаться в качестве человека при работе в Угловом, это может быть гораздо выгоднее –