发表新帖
发表新帖

AngularJS: Call the ng-submit event outside the form

前端 未结
关注
10 1468
渐次进展
渐次进展 2020-12-09 02:07

I\'m a fish in AngularJS and I have this scenario.
相关标签:
10条回答
  • 借酒劲吻你
    2020-12-09 02:29

    This is by far the cleanest solution I found, all credits go to @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>

    This method doesn't require any additional controller JS or other jQuery tweaks.

    0 讨论(0)
  • 天命终不由人
    2020-12-09 02:30

    Use HTML5's form attribute, here's a sample:

    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>

    0 讨论(0)
  • 灰色年华
    2020-12-09 02:35

    Angular 2

    For anyone looking to achieve the same with Angular 2, ngForm exposes an event emitter you can use.

    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>

    You can also perform the same emit from inside your component ts/js file

    0 讨论(0)
  • 情歌与酒
    2020-12-09 02:38

    There is a solution that works for me:

    http://jsbin.com/ODaFaGU/3/edit

    Check out the PART 2 and PART 3.

    There are two solutions inside.

    One for the regular form submit buttons - it allows you to tap the buttons without a delay, but also ensures that pressing the "enter" key in any of the form fields will trigger a submit.

    Secondly there is an additional eventHandler that combines the click, tap and keydown[enter] events into a single one - this ensures that you can hit your controls as well with the keyboard, as with a click on desktop, and a tap on mobile(without hitting the click event twice) devices.

    If you have any problems with this, give me a comment, I'll fix it.

    0 讨论(0)
 看不清?
提交回复
热议问题