Adding formlyProvider allowing developers to override templates and make custom types.

Author: Kent C. Dodds

CHANGELOG.md

@@ -1,5 +1,15 @@
 Version numbers correspond to `bower.json` version
 
+# 0.0.11
+
+## Features
+
+Adding the `formlyProvider` which allows developers to set templateUrls for types. Also allows them to make custom types.
+
+## Bug Fixes
+
+## Breaking Changes
+
 # 0.0.10
 
 ## Features

README.md

@@ -396,6 +396,37 @@ _Example password field_
 	}
 ```
 
+## Other Notes
+
+### Global Config
+
+You can configure formly to use custom templates for specified types (your own "text" template) by injecting the `formlyProvider` in your app's `config` function. The `formlyProvider` has the following functions:
+
+#### setTemplateUrl
+
+Allows you to set a template
+
+```javascript
+formlyProvider.setTemplateUrl('radio', 'views/custom-formly-radio.html');
+formlyProvider.setTemplateUrl('checkbox', 'views/custom-formly-checkbox.html');
+
+// the same can be accomplished with
+
+formlyProvider.setTemplate({
+	radio: 'views/custom-formly-radio.html',
+	checkbox: 'views/custom-formly-checkbox.html'
+});
+```
+
+#### getTemplateUrl
+
+Allows you to get the template
+
+```javascript
+formlyProvider.setTemplateUrl('foo', 'bar');
+formlyProvider.getTemplateUrl('foo') === 'bar'; // true
+```
+
 ## Roadmap
 
 ## Release Notes

src/app.js

@@ -6,7 +6,9 @@ var app = angular.module('app', ['ng',
 	'formly'
 ]);
 
-app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
+app.constant('usingCustomTypeTemplates', window.localStorage.getItem('useCustomTypeTemplates') === 'true');
+
+app.config(function($stateProvider, $urlRouterProvider, $locationProvider, formlyProvider, usingCustomTypeTemplates) {
 	$locationProvider.html5Mode(false);
 	$locationProvider.hashPrefix('!');
 
@@ -18,6 +20,14 @@ app.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
 		templateUrl: 'views/home.html',
 		controller: 'home'
 	});
+	if (usingCustomTypeTemplates) {
+		formlyProvider.setTemplateUrl('text', 'views/custom-field-text.html');
+		// or
+		formlyProvider.setTemplateUrl({
+			radio: 'views/custom-field-radio.html',
+			checkbox: 'views/custom-field-checkbox.html'
+		});
+	}
 });
 
 app.run(function($rootScope, $state, $stateParams, $window) {

src/directives/formly-field.js

@@ -1,46 +1,6 @@
 'use strict';
 angular.module('formly.render')
-.directive('formlyField', function formlyField($http, $compile, $templateCache) {
-
-	var getTemplateUrl = function(type) {
-		var templateUrl = '';
-
-		switch(type) {
-			case 'textarea':
-				templateUrl = 'directives/formly-field-textarea.html';
-				break;
-			case 'radio':
-				templateUrl = 'directives/formly-field-radio.html';
-				break;
-			case 'select':
-				templateUrl = 'directives/formly-field-select.html';
-				break;
-			case 'number':
-				templateUrl = 'directives/formly-field-number.html';
-				break;
-			case 'checkbox':
-				templateUrl = 'directives/formly-field-checkbox.html';
-				break;
-			case 'password' :
-				templateUrl = 'directives/formly-field-password.html';
-				break;
-			case 'hidden' :
-				templateUrl = 'directives/formly-field-hidden.html';
-				break;
-			case 'email':
-				templateUrl = 'directives/formly-field-email.html';
-				break;
-			case 'text':
-				templateUrl = 'directives/formly-field-text.html';
-				break;
-			default :
-				templateUrl = null;
-				break;
-		}
-
-		return templateUrl;
-	};
-	
+.directive('formlyField', function formlyField($http, $compile, $templateCache, formly) {
 	return {
 		restrict: 'AE',
 		transclude: true,
@@ -55,7 +15,7 @@ angular.module('formly.render')
 			if (template) {
 				setElementTemplate(template);
 			} else {
-				var templateUrl = $scope.options.templateUrl || getTemplateUrl($scope.options.type);
+				var templateUrl = $scope.options.templateUrl || formly.getTemplateUrl($scope.options.type);
 				if (templateUrl) {
 					$http.get(templateUrl, {
 						cache: $templateCache

src/modules/formly-render.js

@@ -1,2 +1,36 @@
 // Render module for formly to display forms
-angular.module('formly.render', []);
+angular.module('formly.render', []).provider('formly', function() {
+
+	var templateMap = {
+		textarea: 'directives/formly-field-textarea.html',
+		radio: 'directives/formly-field-radio.html',
+		select: 'directives/formly-field-select.html',
+		number: 'directives/formly-field-number.html',
+		checkbox: 'directives/formly-field-checkbox.html',
+		password: 'directives/formly-field-password.html',
+		hidden: 'directives/formly-field-hidden.html',
+		email: 'directives/formly-field-email.html',
+		text: 'directives/formly-field-text.html'
+	};
+
+	function setTemplateUrl(name, templateUrl) {
+		if (typeof name === 'string') {
+			templateMap[name] = templateUrl;
+		} else {
+			angular.forEach(name, function(templateUrl, name) {
+				setTemplateUrl(name, templateUrl)
+			});
+		}
+	}
+
+	function getTemplateUrl(type) {
+		return templateMap[type];
+	};
+
+	this.setTemplateUrl = setTemplateUrl;
+	this.getTemplateUrl = getTemplateUrl;
+	this.$get = function formly() {
+		return this;
+	}
+	
+});

src/views/custom-field-checkbox.html

@@ -0,0 +1,11 @@
+<div class="checkbox">
+	<label>
+		<input type="checkbox"
+			   ng-required="options.required"
+			   ng-disabled="options.disabled"
+			   ng-model="value">
+		Custom field of type "checkbox" 
+		{{options.label || 'Checkbox'}}
+		{{options.required ? '*' : ''}}
+	</label>
+</div>

src/views/custom-field-radio.html

@@ -0,0 +1,20 @@
+<div class="radio-group">
+	Custom field of type "radio"
+	<label class="control-label">
+		{{options.label}}
+		{{options.required ? '*' : ''}}
+	</label>
+	<div class="radio"
+		 ng-repeat="(key, option) in options.options">
+		<label>
+			<input type="radio"
+				   name="{{id}}"
+				   id="{{id + '_'+ $index}}"
+				   ng-value="option.value"
+				   ng-required="options.required"
+				   ng-model="$parent.value">
+			{{option.name}}
+		</label>
+	</div>
+
+</div>

src/views/custom-field-text.html

@@ -0,0 +1,14 @@
+<div class="form-group">
+	Custom field of type "text"
+	<label for="{{id}}">
+		{{options.label || 'Text'}}
+		{{options.required ? '*' : ''}}
+	</label>
+	<input type="text"
+		   class="form-control"
+		   id="{{id}}"
+		   placeholder="{{options.placeholder}}"
+		   ng-required="options.required"
+		   ng-disabled="options.disabled"
+		   ng-model="value">
+</div>

src/views/home.html

@@ -16,6 +16,11 @@ <h1>Formly for Angular</h1>
 				Edit JSON
 			</button>
 
+			<button class="btn btn-success"
+			        ng-click="toggleCustomTypeTemplates()">
+				{{typeTemplatesButton}}
+			</button>
+
 			<h3>Options</h3>
 			<div source="toPrettyJSON(formOptions, 4)"
 				 hljs>

src/views/home.js

@@ -1,5 +1,5 @@
 'use strict';
-app.controller('home', function($scope, $parse, $rootScope) {
+app.controller('home', function($scope, $parse, $rootScope, $window, usingCustomTypeTemplates) {
 	// Public Methods
 	$scope.onSubmit = function onSubmit() {
 		$scope.submittedData = $scope.formData;
@@ -11,6 +11,16 @@ app.controller('home', function($scope, $parse, $rootScope) {
 		return result;
 	};
 
+	$scope.toggleCustomTypeTemplates = function() {
+		if (usingCustomTypeTemplates) {
+			$window.localStorage.removeItem('useCustomTypeTemplates');
+		} else {
+			$window.localStorage.setItem('useCustomTypeTemplates', 'true');
+		}
+		// reload state
+		$window.location.reload();
+	};
+
 	// Private Methods
 
 	// Events
@@ -36,6 +46,12 @@ app.controller('home', function($scope, $parse, $rootScope) {
 	});
 
 	// Public Vars
+	if (usingCustomTypeTemplates) {
+		$scope.typeTemplatesButton = 'Use Built-in Type Templates';
+	} else {
+		$scope.typeTemplatesButton = 'Use Custom Type Templates';
+	}
+
 	$scope.formFields = [{
 		key: 'firstName',
 		type: 'text',