-
-
Save dillorscroft/72fa5112a164f52b1fe86be181f5e7d2 to your computer and use it in GitHub Desktop.
User Registration demo using angular-schema-form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .DS_Store | |
| bower_components/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('myApp', ['schemaForm', 'userRegistration']) | |
| .controller('AppController', ['$scope', function ($scope){ | |
| $scope.input = {}; | |
| $scope.options = { formDefaults: { ngModelOptions: {allowInvalid: true} } }; | |
| $scope.schema = { | |
| "id": "/auth", | |
| "type": "object", | |
| "properties": { | |
| "username": { | |
| "title": "Username", | |
| "type": "string", | |
| "minLength": 4, | |
| "maxLength": 255, | |
| "required": true | |
| }, | |
| "password": { | |
| "title": "Password", | |
| "type": "string", | |
| "minLength": 6, | |
| "maxLength": 32, | |
| "required": true | |
| }, | |
| } | |
| }; | |
| $scope.form = [ | |
| { "key": "username", "placeholder": "Username", "type": "unique-username" }, | |
| { "key": "password", "title": "Password", "type": "password" }, | |
| { "key": "password_confirm", "type": "password-confirm", "title": "Confirm Password", "condition": "model.password" } | |
| ]; | |
| }]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "angular-schema-form-user-registration", | |
| "version": "0.0.1", | |
| "authors": [ | |
| "plong0 <pat@technaturally.com>" | |
| ], | |
| "description": "User Registration demo using angular-schema-form", | |
| "keywords": [ | |
| "angularjs", | |
| "angular-schema-form", | |
| "user-registration", | |
| "custom-form-type-validation", | |
| "asynchronous-validation" | |
| ], | |
| "license": "MIT", | |
| "ignore": [ | |
| "**/.*", | |
| "node_modules", | |
| "bower_components", | |
| "test", | |
| "tests" | |
| ], | |
| "dependencies": { | |
| "angular": "~1.3.14", | |
| "angular-schema-form": "~0.7.13", | |
| "bootstrap": "~3.3.2" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html ng-app="myApp"> | |
| <head> | |
| <title>User Registration using angular-schema-form</title> | |
| <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" type="text/css" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>User Registration Demo</h1> | |
| <div ng-controller="AppController"> | |
| <form name="user-registration" sf-schema="schema" sf-form="form" sf-model="input" sf-options="options"></form> | |
| </div> | |
| </div> | |
| <script type="text/javascript" src="bower_components/angular/angular.js"></script> | |
| <script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script> | |
| <script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.js"></script> | |
| <script type="text/javascript" src="bower_components/angular-schema-form/dist/bootstrap-decorator.min.js"></script> | |
| <script type="text/javascript" src="bower_components/objectpath/lib/ObjectPath.js"></script> | |
| <script type="text/javascript" src="bower_components/tv4/tv4.js"></script> | |
| <script type="text/javascript" src="app.js"></script> | |
| <script type="text/javascript" src="user-registration.js"></script> | |
| <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> | |
| <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('userRegistration', ['schemaForm']) | |
| .directive('passwordConfirm', function(){ | |
| return { | |
| restrict: 'A', | |
| require: 'ngModel', | |
| link: function(scope, attr, element, ngModel) { | |
| var error; | |
| scope.customError = function(){ | |
| return scope.schemaError() || error; | |
| }; | |
| scope.$watch(element.passwordConfirm, function(value){ | |
| scope.passwordConfirm = value; | |
| ngModel.$validate(); | |
| }); | |
| ngModel.$validators.match = function(modelValue, viewValue){ | |
| var value = modelValue || viewValue; | |
| if(value != scope.passwordConfirm){ | |
| error = { code: 'match', message: 'Passwords do not match.' }; | |
| return false; | |
| } | |
| delete error; | |
| return true; | |
| }; | |
| } | |
| }; | |
| }) | |
| .directive('uniqueUsername', ['$q', '$timeout', function($q, $timeout){ | |
| return { | |
| restrict: 'A', | |
| require: 'ngModel', | |
| link: function(scope, attr, element, ngModel) { | |
| var error = null; | |
| scope.customError = function(){ | |
| return scope.schemaError() || error; | |
| }; | |
| ngModel.$asyncValidators.unique = function(modelValue, viewValue){ | |
| var defer = $q.defer(); | |
| var value = modelValue || viewValue; | |
| // replace $timeout with your API call that checks availability | |
| $timeout(function(){ | |
| if(value == 'Demo'){ | |
| error = { code: 'unique', message: 'Username is not available.' }; | |
| defer.reject(error.message); | |
| } | |
| else{ | |
| defer.resolve(true); | |
| } | |
| }, 500); | |
| return defer.promise; | |
| }; | |
| } | |
| }; | |
| }]) | |
| .config(['schemaFormDecoratorsProvider', function(schemaFormDecoratorsProvider){ | |
| schemaFormDecoratorsProvider.addMapping( | |
| 'bootstrapDecorator', | |
| 'password-confirm', | |
| 'password-confirm.html' | |
| ); | |
| schemaFormDecoratorsProvider.addMapping( | |
| 'bootstrapDecorator', | |
| 'unique-username', | |
| 'unique-username.html' | |
| ); | |
| }]) | |
| .run(['$templateCache', function($templateCache){ | |
| // Get and modify default templates | |
| var tmpl = $templateCache.get('directives/decorators/bootstrap/default.html'); | |
| $templateCache.put( | |
| 'password-confirm.html', | |
| tmpl.replace('type="{{form.type}}"', 'type="password" password-confirm="{{form.condition}}"').replace(/schemaError/g, 'customError') | |
| ); | |
| $templateCache.put( | |
| 'unique-username.html', | |
| tmpl.replace('type="{{form.type}}"', 'type="text" unique-username').replace(/schemaError/g, 'customError') | |
| ); | |
| }]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment