单击submit之后，Form什么也不做
After clicking submit, Form does nothing
我一直在为我的NodeJS(使用SailsJS MVC)的权限系统工作，并遇到了一个问题。在解决了我的第一个错误后，这里概述了我现在遇到的问题，表单不做任何事情。它不会向控制台发送错误，也不会在SailsJS控制台本身记录错误。下面是我的代码。
/**
* GroupsController (API)
*
* @description :: Server-side logic for managing Permissions
* @help :: See http://sailsjs.org/#!/documentation/concepts/Controllers
*/
module.exports = {
update: function(req, res, next) {
var groupObj = {
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
};
Groups.update(req.param('id'), groupObj, function groupUpdated(err) {
if (err) {
return res.redirect('/group/edit/' + req.param('id'));
}
res.redirect('/');
});
},
createGroup: function(req, res) {
Groups.create({
groupName: req.param('groupName'),
canViewUsers: req.param('canViewUsers'),
canEditUsers: req.param('canEditUsers'),
canPromoteToStaff: req.param('canPromoteToStaff'),
canViewNotes: req.param('canViewNotes'),
canEditPermissions: req.param('canEditPermissions')
}).exec({
error: function (err) {
return res.negotiate(err);
}
});
}
};
GroupsController(形式)
angular.module('GroupsModule').controller('GroupsController', ['$scope', '$http', 'toastr', function($scope, $http, toastr) {
$scope.groupCreateForm = function(){
// Submit request to Sails.
$http.post('/createGroup', {
groupName: $scope.createGroup.groupName,
canViewUsers: $scope.createGroup.canViewUsers,
canEditUsers: $scope.createGroup.canEditUsers,
canPromoteToStaff: $scope.createGroup.canPromoteToStaff,
canViewNotes: $scope.createGroup.canViewNotes,
canEditPermissions: $scope.createGroup.canEditPermissions
})
.then(function onSuccess(sailsResponse){
window.location = '/groups';
})
.catch(function onError(sailsResponse){
// Handle known error type(s).
// If using sails-disk adpater -- Handle Duplicate Key
var groupAlreadyExists = sailsResponse.status == 409;
if (groupAlreadyExists) {
toastr.error('That group already exists', 'Error');
}
})
}}]);
HTML表单
<!--STYLES-->
<link rel="stylesheet" href="/styles/angular-toastr.css">
<link rel="stylesheet" href="/styles/bootstrap.3.1.1.css">
<link rel="stylesheet" href="/styles/importer.css">
<link rel="stylesheet" href="/styles/style.css">
<link rel="stylesheet" href="/styles/theme.css">
<link rel="stylesheet" href="/styles/theme.min.css">
<!--STYLES END-->
<body ng-app="DashboardModule" ng-controller="DashboardController" ng-cloak>
<div class="bs-docs-section clearfix">
<div class="row">
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">Insomnia eSports</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/groups"><i class="fa fa-users" aria-hidden="true"></i> Group Management </a></li>
</ul>
<!--
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
-->
<ul class="nav navbar-nav navbar-right">
<li><a href="/logout">Sign Out</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<form ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">
<h2 class="form-signin-heading">Create A Group</h2>
<div class="row">
<!-- Group Name -->
<label>Group Name</label>
<input type="text" class="form-control" placeholder="Group Name" name="groupName" ng-model="createGroup.name" ng-maxlength="25" required>
</div>
<!-- Can View Users -->
<div class="row">
<label>View Users?</label>
<input type="checkbox" name="canViewUsers" ng-model="createGroup.canViewUsers">
</div>
<!-- Can View Users -->
<div class="row">
<label>Edit Users?</label>
<input type="checkbox" name="canEditUsers" ng-model="createGroup.canEditUsers">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Promote to Staff?</label>
<input type="checkbox" name="canPromoteToStaff" ng-model="createGroup.canPromoteToStaff">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Can view notes?</label>
<input type="checkbox" name="canViewNotes" ng-model="createGroup.canViewNotes">
</div>
<!-- Can Promote To Staff -->
<div class="row">
<label>Can edit permissions?</label>
<input type="checkbox" name="canEditPermissions" ng-model="createGroup.canEditPermissions">
</div>
<br/>
<!-- Disable signup button until the form has no errors -->
<button class="btn btn-success btn-lg btn-block" type="submit" ng-disabled="createGroup.$invalid">
<span>Create Group</span>
</button>
<input type="hidden" name="_csrf" value="<%= _csrf %>" />
</form>
<!--SCRIPTS-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/Base64.js"></script>
<script src="/js/dependencies/angular-toastr.js"></script>
<script src="/js/dependencies/compareTo.module.js"></script>
<script src="/js/public/signup/SignupModule.js"></script>
<script src="/js/public/groups/GroupsModule.js"></script>
<script src="/js/private/dashboard/DashboardModule.js"></script>
<script src="/js/public/homepage/HomepageModule.js"></script>
<script src="/js/private/dashboard/DashboardController.js"></script>
<script src="/js/public/groups/GroupsController.js"></script>
<script src="/js/public/homepage/HomepageController.js"></script>
<script src="/js/public/signup/SignupController.js"></script>
<!--SCRIPTS END-->
</body>
你没有正确的ng控制器连接到你的表单，所以$scope.groupCreateForm甚至不应该被调用。请尝试将ng-controller="GroupsController"添加到表单中，然后再试一次。
<form ng-controller="GroupsController" ng-submit="groupCreateForm()" id="create-group-form" class="form-signin" name="createGroup">
我用下面的代码修复了这个问题
<body ng-app="GroupsModule" ng-controller="GroupsController" ng-cloak>
我定义了错误的应用程序和控制器。
相关文章：
- 这是什么 ==- javascript 运算符
- 我的单元测试选项是什么
- 全局变量和全局对象的属性之间有什么区别吗
- 打破承诺链的好方法是什么
- 在AngularJS应用程序中使用封装指令和路由的推荐方式是什么
- Javascript中的空白是什么
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome，在其他浏览器中显示
- Dojo:访问dijit.form.Select中单击的项目
- 在ember/handlers中使用value和valueBinding有什么区别
- Javascript form innerHTML
- 什么'在webpack外部设置中，reactDom和reactDom不同
- 在JavaScript中拆分日期字符串的更好方法是什么
- this.form.elements.code引用了什么
- 什么是 FORM 相当于 DOM 的 getNextSibling
- 使用 XMLHttpRequest 调用 URL 和 Form 有什么区别
- redux-form 是 卸载组件后破坏我的状态，什么给了
- typeError:form.serialize不是函数-我缺少什么
- 单击submit之后，Form什么也不做
- 从form.elements中排除输入[type='image']的历史原因是什么?
- $('form'）[0]的替代方案是什么
