Cal*_*ald 32 html javascript form-submit angularjs angularjs-directive
我是AngularJS的鱼,我有这个场景.
<form>
<input type="text">
</form>
<button type="submit">submit</button>
在正常情况下,AngularJS提供ng-submit指令作为表单中的属性,但我需要在外面调用它.
那么,有人遇到过同样的问题吗？如果是的话,你做了什么？
Hod*_*des 52
使用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>Joa*_*olo 17
请使用ng-controller包围您的代码,并使用ng-单击<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 = '';
}
};
}
这是迄今为止我找到的最干净的解决方案,所有信用都归@Offereins /sf/answers/1641983381/
<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/api/forms/NgForm
<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文件中执行相同的发射