cyberfly
5/23/2017 - 6:47 AM
Form validation (on submit) with AngularJS 1.X
Form validation (on submit) with AngularJS 1.X
(function() {
'use strict';
angular
.module('app')
.factory('userService', userService);
userService.$inject = ['$resource', '$rootScope', '$q', 'API'];
function userService($resource, $rootScope, $q, API) {
var userBaseURI = API.BaseURL + API.Services.Users;
return {
getUserByEmail: getUserByEmail,
getUsers: getUsers,
createUser: createUser,
updateUser: updateUser,
deleteUser: deleteUser,
getRoles : getRoles
};
function getUserByEmail (email) {
return $resource(userBaseURI + '/getUserByEmail/:email')
.get({email: email})
.$promise
.then(successCallback);
function successCallback(data) {
return data.user;
}
}
function getUsers () {
return $resource(userBaseURI)
.get()
.$promise
.then(successCallback);
function successCallback(data) {
return data.users;
}
}
function getRoles() {
return $resource(userBaseURI + '/roles')
.get()
.$promise
.then(successCallback);
function successCallback(data) {
return data.roles;
}
}
function createUser (data) {
return $resource(userBaseURI + '/create', null, {
'post': {
method: 'POST',
}
})
.post(data)
.$promise
.then(successCallback);
function successCallback(data) {
return data;
}
}
function updateUser (id, data) {
return $resource(userBaseURI + '/:id', null, {
'update': {
method: 'PUT',
}
})
.update({id: id}, data)
.$promise
.then(successCallback);
function successCallback(data) {
return data;
}
}
function deleteUser (id) {
return $resource(userBaseURI + '/:id', null, {
'delete': {
method: 'DELETE',
}
})
.delete({id: id})
.$promise
.then(successCallback);
function successCallback(data) {
return data;
}
}
}
})();<div class="table-responsive panel-body">
<table class="table" >
<tr class="border-top-white">
<th class="text-center">#</th>
<th>Name</th>
<th class="text-center">Email</th>
<th class="text-center">Role</th>
<th class="text-center">Companies</th>
<th class="text-center">Actions</th>
</tr>
<tr ng-repeat="user in userList">
<td class="text-center">{{ $index+1 }}</td>
<td>{{ user.name }}</td>
<td class="text-center">{{user.email}}</td>
<td class="text-center">{{user.role.description}}</td>
<td class="text-center">
<button type="button" class="btn btn-default btn-success" ng-click="viewCompanies(user)" ng-disabled="user.companies_count < 1">
{{user.companies_count}}
</button>
</td>
<td class="text-center">
<button type="button" class="btn btn-default" ng-click="vm.openEditUser(user)" >Edit</button>
<button ng-show="user.companies_count==0 && user.role_id!=3" type="button" class="btn btn-danger" ng-click="vm.openDeleteUser(user)" >Delete</button>
</td>
</tr>
</table>
</div> angular
.module('app.admin')
.controller('UserController', UserController);
UserController.$inject = ['$rootScope', '$scope', '$stateParams','userService','$timeout','adminService','$uibModal', '$state'];
function UserController($rootScope, $scope, $stateParams,userService, $timeout,adminService,$uibModal,$state) {
var vm = this;
vm.openCreateUser = openCreateUser;
vm.openEditUser = openEditUser;
vm.openDeleteUser = openDeleteUser;
//start modal
//Create User Modal
function openCreateUser() {
var modalInstance = $uibModal.open({
templateUrl: 'assets/admin/create-user.modal.html',
controller: modelInstanceController
});
modelInstanceController.$inject = ['$rootScope', '$scope', '$state', 'userService', 'Notification'];
function modelInstanceController($rootScope, $scope, $state, userService, Notification) {
//get roles
userService.getRoles()
.then(function(data){
console.log('get all roles :', data);
$scope.roles = data;
});
$scope.ok = ok;
$scope.cancel = cancel;
$scope.formData = {};
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
$scope.submitted = true;
// check to make sure the form is completely valid
if (isValid) {
ok();
}
};
function ok() {
console.log('Create User Form Data: ', $scope.formData);
// return false;
userService
.createUser($scope.formData)
.finally(finallyCallback);
function finallyCallback() {
modalInstance.close();
$rootScope.$broadcast('users:updated');
Notification.success('User Created');
}
}
function cancel() {
modalInstance.close();
}
}
}
//Edit User Modal
function openEditUser(user) {
var modalInstance = $uibModal.open({
templateUrl: 'assets/admin/edit-user.modal.html',
controller: modelInstanceController
});
modelInstanceController.$inject = ['$rootScope', '$scope', '$stateParams', '$state', 'userService', 'Notification'];
function modelInstanceController($rootScope, $scope, $stateParams, $state, userService, Notification) {
//get roles and set current user data
userService.getRoles()
.then(function(data){
console.log('get all roles :', data);
$scope.roles = data;
//set current user data
var currentUser = {};
currentUser.name = user.name;
currentUser.email = user.email;
//convert role_id to string to match js comparison
currentUser.role_id = user.role_id.toString();
$scope.formData = currentUser;
});
console.log('edit user data : ', user);
$scope.ok = ok;
$scope.cancel = cancel;
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
$scope.submitted = true;
// check to make sure the form is completely valid
if (isValid) {
ok();
}
};
function ok() {
//remove email from formData to prevent update email
delete $scope.formData.email;
userService
.updateUser(user.id, $scope.formData)
.finally(finallyCallback);
function finallyCallback() {
modalInstance.close();
$rootScope.$broadcast('users:updated');
Notification.success('User Updated');
}
}
function cancel() {
modalInstance.close();
}
}
}
//Delete User Modal
function openDeleteUser(user) {
var modalInstance = $uibModal.open({
templateUrl: 'assets/admin/delete-user.modal.html',
controller: modelInstanceController
});
modelInstanceController.$inject = ['$rootScope', '$scope', '$stateParams', '$state', 'userService', 'Notification'];
function modelInstanceController($rootScope, $scope, $stateParams, $state, userService, Notification) {
$scope.ok = ok;
$scope.cancel = cancel;
// function to submit the form after all validation has occurred
$scope.submitForm = function(isValid) {
$scope.submitted = true;
// check to make sure the form is completely valid
if (isValid) {
ok();
}
};
function ok() {
userService
.deleteUser(user.id)
.then(function(response){
console.log('delete user result : ', response);
})
.finally(finallyCallback);
function finallyCallback() {
modalInstance.close();
$rootScope.$broadcast('users:updated');
Notification.success('User Deleted');
}
}
function cancel() {
modalInstance.close();
}
}
}
//end of modal
}<form class="form-horizontal" role="form" name="editUserForm" ng-submit="submitForm(editUserForm.$valid)" novalidate>
<div class="modal-header">
<h3 class="modal-title">Edit User</h3>
</div>
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error' : editUserForm.name.$invalid && submitted }">
<label class="col-sm-3 control-label"
for="name">Full Name <span class="required_label">*</span></label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" ng-model="formData.name" required />
<p ng-show="editUserForm.name.$invalid && submitted" class="help-block">Full Name is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : editUserForm.email.$invalid && submitted }">
<label class="col-sm-3 control-label"
for="email">Email <span class="required_label">*</span></label>
<div class="col-sm-9">
<input type="email" name="email" class="form-control" ng-model="formData.email" readonly="" />
<p ng-show="editUserForm.email.$invalid && submitted" class="help-block">Email is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : editUserForm.role_id.$invalid && submitted }">
<label class="col-sm-3 control-label"
for="role_id">Role <span class="required_label">*</span></label>
<div class="col-sm-9">
<select name="role_id" id="" ng-model="formData.role_id" class="form-control" required >
<option value="">Select Role</option>
<option value="{{ role.role_id }}" ng-repeat="role in roles" ng-selected="role.role_id == formData.role_id" >{{ role.description }}</option>
</select>
<p ng-show="editUserForm.role_id.$invalid && submitted" class="help-block">Role is required.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right" ng-click="cancel()">Cancel</button>
<button type="submit" class="btn btn-primary pull-right" >Save Changes</button>
</div>
</form>
<form class="form-horizontal" role="form" name="deleteUserForm" ng-submit="submitForm(deleteUserForm.$valid)" novalidate>
<div class="modal-header">
<h3 class="modal-title">Delete User</h3>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-12">
Are you sure to delete this user? This action is permanent.
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-danger pull-right" >Delete</button>
<button type="button" class="btn btn-default pull-right" ng-click="cancel()">Cancel</button>
</div>
</form><form class="form-horizontal" role="form" name="createUserForm" ng-submit="submitForm(createUserForm.$valid)" novalidate>
<div class="modal-header">
<h3 class="modal-title">Create User</h3>
</div>
<div class="modal-body">
<div class="form-group" ng-class="{ 'has-error' : createUserForm.name.$invalid && submitted }">
<label class="col-sm-3 control-label"
for="name">Full Name <span class="required_label">*</span></label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" ng-model="formData.name" required />
<p ng-show="createUserForm.name.$invalid && submitted" class="help-block">Full Name is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : createUserForm.email.$invalid && submitted }">
<label class="col-sm-3 control-label"
for="email">Email <span class="required_label">*</span></label>
<div class="col-sm-9">
<input type="email" name="email" class="form-control" ng-model="formData.email" required />
<p ng-show="createUserForm.email.$invalid && submitted" class="help-block">Email is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : createUserForm.password.$invalid && submitted }">
<label class="col-sm-3 control-label"
for="password">Password <span class="required_label">*</span></label>
<div class="col-sm-9">
<input type="password" name="password" id="password" class="form-control" ng-model="formData.password" required />
<p ng-show="createUserForm.password.$invalid && submitted" class="help-block">Password is required.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : createUserForm.repeat_password.$invalid && submitted }">
<label class="col-sm-3 control-label"
for="repeat_password">Confirm Password <span class="required_label">*</span></label>
<div class="col-sm-9">
<input type="password" name="repeat_password" class="form-control" ng-model="formData.repeat_password" required pw-check="password" />
<p ng-show="createUserForm.repeat_password.$invalid && submitted" class="help-block">Confirm Password is required.</p>
<p class="help-block" ng-show="createUserForm.repeat_password.$error.pwmatch && submitted">Passwords don't match.</p>
</div>
</div>
<div class="form-group" ng-class="{ 'has-error' : createUserForm.role_id.$invalid && submitted }">
<label class="col-sm-3 control-label"
for="role_id">Role <span class="required_label">*</span></label>
<div class="col-sm-9">
<select name="role_id" id="" ng-model="formData.role_id" class="form-control" required >
<option value="">Select Role</option>
<option value="{{ role.role_id }}" ng-repeat="role in roles">{{ role.description }}</option>
</select>
<p ng-show="createUserForm.role_id.$invalid && submitted" class="help-block">Role is required.</p>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-right" ng-click="cancel()">Cancel</button>
<button type="submit" class="btn btn-primary pull-right" >Submit</button>
</div>
</form>(function() {
'use strict';
angular
.module('app')
.directive('wmBlock', wmBlock)
.directive('pwCheck', pwCheck);
function wmBlock() {
return {
scope: {
wmBlockLength: '='
},
link: function(scope, elm, attrs) {
elm.bind('keypress', function(e) {
if (elm[0].value.length > scope.wmBlockLength) {
e.preventDefault();
return false;
}
});
}
};
}
function pwCheck(){
return {
require: 'ngModel',
link: function (scope, elem, attrs, ctrl) {
var firstPassword = '#' + attrs.pwCheck;
elem.add(firstPassword).on('keyup', function () {
scope.$apply(function () {
var v = elem.val()===$(firstPassword).val();
ctrl.$setValidity('pwmatch', v);
});
});
}
}
}
})();