【发布时间】：2017-08-21 12:44:15
【问题描述】：
我有表单，当用户输入数据并提交数据时，数据应该去控制器并将字符串转换为 JSON 对象，然后提交函数并检查条件。如果条件为真，它应该去工厂服务并创建一个新用户并在控制台中显示详细信息。
如果条件为假，则控制台中应显示“用户已存在”的消息。问题是它要进入控制器页面，但提交功能没有执行
HTML 代码
<body ng-app="myApp">
<div class="container-fluid" ng-controller="createfranctrl as ctrl">
<form ng-submit="ctrl.submit()" name="myForm" action="" method="post" class="form-horizontal center-block" id="create-franchise-form" >
<fieldset>
<legend>Create Franchise</legend>
<div class="form-group">
<label class="control-label col-sm-2" for="franchisor-name">Franchise Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="ctrl.user.franame" class="form-control" name="franchisor-name" id="franchisor-name" placeholder="Franchisor Name" required pattern="[A-Za-z]{4,}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="franchisor-city">City:</label>
<div class="col-sm-10">
<input type="text" ng-model="ctrl.user.city" class="form-control" name="franchisor-city" id="franchisor-city" placeholder="City" required pattern="[A-Za-z]{4,}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="franchise-name">Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="ctrl.user.name" class="form-control" name="franchise-name" id="franchise-name" placeholder="Name" required pattern="[A-Za-z]{4,}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="franchisor-user-id">User ID:</label>
<div class="col-sm-10">
<input type="number" ng-model="ctrl.user.uid" class="form-control" name="franchisor-user-id" id="franchisor-user-id" placeholder="User ID" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="franchisor-password">Password:</label>
<div class="col-sm-10">
<input type="password" ng-model="ctrl.user.password" class="form-control" name="franchisor-password" id="franchisor-password" placeholder="Password" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{6,}$" title="password must 1 Capital Letter, 1 Small Letter, 1 Number and min 6 Letters ">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="franchisor-mobile">Mobile:</label>
<div class="col-sm-10">
<input type="text" ng-model="ctrl.user.mobile" class="form-control" name="franchisor-mobile" id="franchisor-mobile" placeholder="Mobile Number" required pattern="[789][0-9]{9}" title="Mobile should contain 10 numbers start with 7,8,9" maxlength="10">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="franchisor-email">E-Mail:</label>
<div class="col-sm-10">
<input type="email" ng-model="ctrl.user.email" class="form-control" name="franchisor-email" id="franchisor-email" placeholder="E-Mail" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">CREATE</button>
<button type="reset" class="btn btn-danger">CLEAR</button>
</div>
</div>
</fieldset>
</form>
</div></body>
控制器代码
'use strict';
angular.module('myApp').controller('createfranctrl', ['$scope', 'createservice', function($scope, createservice) {
var self = this;
self.user={franame:'',city:'',name:'',uid:null,password:'',mobile:'',email:''};
self.user=[];
self.submit = submit;
console.log("loading ctrl file");
function submit() {
console.log('enter submit function');
if(self.user.uid===null){
console.log('Saving New User', self.user);
createUser(self.user);
}else{
console.log('user already exist');
}
}
function createUser(user){
console.log("enter create function");
createservice.createUser(user);
}
}]);
工厂代码
'use strict';
angular.module('myApp').factory('createservice', ['$http', '$q', function($http, $q){
var factory = {
fetchAllUsers: fetchAllUsers,
createUser: createUser
};
return factory;
function fetchAllUsers() {
var deferred = $q.defer();
$http.get(data)
.then(
function (response) {
deferred.resolve(response.data);
},
function(errResponse){
console.log('Error while fetching Users');
deferred.reject(errResponse);
}
);
return deferred.promise;
}
function createUser(user) {
console.log('create in service');
var deferred = $q.defer();
$http.post(data, user)
.then(
function (response) {
deferred.resolve(response.data);
},
function(errResponse){
console.error('Error while creating User');
deferred.reject(errResponse);
}
);
return deferred.promise;
}
}]);
【问题讨论】：
-
为什么将 self.user 声明为数组（self.user=[];) 已经将它初始化为对象？您在表单中使用它的方式表明它应该是一个对象而不是数组。
-
旁注：您可以将您的工厂函数更改为
return $http.get(..)和return $http.post(..)，而不是使用deferred反模式，从而为您节省大约20 行冗余代码。 -
jbrown 感谢您的调查，我已经更改了它但仍然无法正常工作，我已经更新了有关该问题的信息，您可以看看
-
从表单中移除
action=""属性并添加novalidate以禁用来自 html 的自动检查
标签： angularjs service controller factory