-
-
Save brian428/2690fd2374ca6ce092df to your computer and use it in GitHub Desktop.
schema form custom validation
This file contains hidden or 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 hidden or 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 hidden or 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 <[email protected]>" | |
| ], | |
| "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 hidden or 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 hidden or 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