Adding template property. Expects string.

Author: Kent C. Dodds

README.md

@@ -111,6 +111,13 @@ When constructing fields use the options below to customize each field object. Y
 > [`hidden`](#hidden-form-field),
 > [`email`](#email-form-field)
 
+---
+##### template (string)
+>`template` can be set instead of `type` to use a custom html template form field. Should be used with one-liners mostly (like a directive). Useful for adding functionality to fields.
+
+###### Default
+>`undefined`
+
 ---
 ##### templateUrl (string)
 >`templateUrl` can be set instead of `type` to use a custom html template form field. Set a path relative to the root of the application. ie `directives/custom-field.html`

src/directives/formly-field.js

@@ -51,17 +51,26 @@ angular.module('formly.render')
 			value: '=formValue'
 		},
 		link: function fieldLink($scope, $element, $attr) {
-			var templateUrl = $scope.options.templateUrl || getTemplateUrl($scope.options.type);
-			if (templateUrl) {
-				$http.get(templateUrl, {
-					cache: $templateCache
-				}).success(function(data) {
-					//template data returned
-					$element.html(data);
-					$compile($element.contents())($scope);
-				});
+			var template = $scope.options.template;
+			if (template) {
+				setElementTemplate(template);
 			} else {
-				console.log('Formly Error: template type \'' + $scope.options.type + '\' not supported.');
+				var templateUrl = $scope.options.templateUrl || getTemplateUrl($scope.options.type);
+				if (templateUrl) {
+					$http.get(templateUrl, {
+						cache: $templateCache
+					}).then(function(response) {
+						setElementTemplate(response.data);
+					}, function(error) {
+						console.log('Formly Error: Problem loading template for ' + templateUrl, error);
+					});
+				} else {
+					console.log('Formly Error: template type \'' + $scope.options.type + '\' not supported.');
+				}
+			}
+			function setElementTemplate(templateData) {
+				$element.html(templateData);
+				$compile($element.contents())($scope);
 			}
 		},
 		controller: function fieldController($scope) {
@@ -71,7 +80,7 @@ angular.module('formly.render')
 			}
 
 			// set field id to link labels and fields
-			$scope.id = $scope.formId + $scope.options.type + $scope.index;
+			$scope.id = $scope.formId + ($scope.options.type || 'Custom') + $scope.index;
 		}
 	};
 });

src/index.html

@@ -35,6 +35,7 @@
 		<script src="bower_components/highlightjs/highlight.pack.js"></script>
 		<script src="app.js"></script>
 		<script src="views/home.js"></script>
+		<script src="views/custom-field.js"></script>
 		<script src="modules/formly.js"></script>
 		<script src="modules/formly-render.js"></script>
 		<script src="directives/formly-form.js"></script>

src/views/home.js

@@ -88,6 +88,16 @@ app.controller('home', function($scope, $parse, $rootScope) {
 		min: 0,
 		max: 100,
 		required: true
+	}, {
+		key: 'seeWhatYouType',
+		type: 'customTemplate',
+		templateUrl: 'views/custom-template.html',
+		label: 'Do you like seeing what you type?'
+	}, {
+		key: 'useDirective',
+		template: '<div custom-field add-smile="true"></div>',
+		type: 'customField',
+		label: 'Do you want the power?'
 	}, {
 		key: 'transportation',
 		type: 'select',