https://github.com/patrickjs/angular-example-basic-form
An AngularJS example for a basic signup form example
https://github.com/patrickjs/angular-example-basic-form
Last synced: 4 months ago
JSON representation
An AngularJS example for a basic signup form example
- Host: GitHub
- URL: https://github.com/patrickjs/angular-example-basic-form
- Owner: PatrickJS
- License: mit
- Created: 2015-03-04T06:28:10.000Z (almost 11 years ago)
- Default Branch: gh-pages
- Last Pushed: 2015-03-18T18:02:16.000Z (almost 11 years ago)
- Last Synced: 2025-05-07T18:56:36.962Z (8 months ago)
- Language: JavaScript
- Homepage: http://gdi2290.net/angular-example-basic-form/
- Size: 178 KB
- Stars: 9
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# angular-example-basic-form
An AngularJS example for a basic signup form example using ngMessages, $pending, $validators, $asyncValidators, ng-model-options, and match password
[Edit via plunker](http://plnkr.co/edit/fIHr3BjcrfyPwodnRhrh?p=preview)
```html
angular-example-basic-form
angular-example-basic-form
Sign Up Free
Email:
Valliding Email...
You did not enter your email address
You did not enter a valid email address
Your email address is already taken
Password:
You did not enter your password
Your password is too short
Please use valid password characters
Confirm Password:
You did not enter a confirmation password
Your two passwords did not match
Signup
Example Built by @gdi2290
```
```javascript
angular.module('App', [
'ngMessages',
'fake-server' // ignore me
])
.controller('LoginController', function($scope, Auth, $window) {
$scope.loading = false;
$scope.user = {
email: null,
password: null
};
$scope.reset = function(form) {
$scope.user = {
email: null,
password: null
};
$scope.confirmPassword = null
form.$setPristine();
form.$setUntouched();
form.$valid = true;
form.$invalid = false;
form.$error = {};
};
$scope.submit = function(user, form) {
$scope.loading = true;
Auth.signup(user)
.then(function(data) {
$scope.reset(form);
console.log('User Login', user);
$window.alert('Thanks you ' + user.email + ' for signing up');
// redirect etc
// $state.go('app.home')
})
.catch(function(err) {
$window.alert(err);
})
.finally(function() {
$scope.loading = false;
});
};
})
.factory('Auth', function($q, $http) {
var authenticated = false;
return {
isAuthenticated: function() {
return authenticated;
},
signup: function(user) {
return $http.post('/api/signup', {
email: user.email,
password: user.password
})
.then(function(res) {
// do something here
authenticated = true;
return res.data;
})
.catch(function(res) {
throw res.data;
});
} // end return
}; // end return
})
.directive('matchPassword', function() {
return {
restrict: 'A',
require: ['^ngModel', '^form'],
link: function(scope, element, attrs, ctrls) {
var formController = ctrls[1];
var ngModel = ctrls[0];
var otherPasswordModel = formController[attrs.matchPassword];
ngModel.$validators.passwordMatch = function(modelValue, viewValue) {
var password = modelValue || viewValue;
var otherPassword = otherPasswordModel.$modelValue || otherPasswordModel.viewValue;
return password === otherPassword;
};
} // end link
}; // end return
})
.directive('validatePasswordCharacters', function() {
var REQUIRED_PATTERNS = [
// /\d+/, //numeric values
// /[a-z]+/, //lowercase values
// /[A-Z]+/, //uppercase values
// /\W+/, //special characters
/^\S+$/ //no whitespace allowed
];
return {
require : 'ngModel',
link : function($scope, element, attrs, ngModel) {
ngModel.$validators.passwordCharacters = function(value) {
var status = true;
angular.forEach(REQUIRED_PATTERNS, function(pattern) {
status = status && pattern.test(value);
});
return status;
};
} // end link
}; // end return
})
.directive('uniqueEmail', function($http, $q) {
return {
require : 'ngModel',
link : function($scope, element, attrs, ngModel) {
ngModel.$asyncValidators.uniqueEmail = function(modelValue, viewValue) {
var email = modelValue || viewValue;
return $http.post('/api/unique-email', {email: email}).then(function(res) {
if (res.data.exists) {
return $q.reject();
}
return $q.when();
});
}; // end async
} // end link
}; // end return
});
```
[](https://angularclass.com)
##[AngularClass](https://angularclass.com)
> Learn Angular in 2 days from the best