Last active
December 19, 2016 15:41
-
-
Save plong0/b158b596961d18b52770 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') | |
); | |
}]); |
Nevermind I was using the bootstrap decorator that is it's own project and is not compatible.
Hi there,
After looking at this gist and this issue: json-schema-form/angular-schema-form#369 I still don't know whether you can show your custom validation messages with $scope.$broadcast('schemaFormValidate');. In my case, the event invalidates the field but the message does not show unless I issue scope.$broadcast('schemaForm.error.MY_FIELD,...) which is not so great because I have to call it again with a true! I was wondering if you have come up with a better solution.
Thanks.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This doesn't work for me, I get the following errors:
I tried changing the directive priority for uniqueUsername and passwordConfirm but then I get the same errors but related to schemaValidate.