Merge pull request #29 from kentcdodds/master

Closes #27 and #28

Author: ghelton

CHANGELOG.md

@@ -1,5 +1,17 @@
 Version numbers correspond to `bower.json` version
 
+# 0.0.12
+
+## Features
+
+Adding the `formlyOptionsProvider` which allows developers to set default form options.
+
+Adding `submitButtonTemplate` to the configurable `formlyOptions`. If it has a value, then the button in the `formly-form` directive will be replaced with the compiled (on the scope) version of that value. Also adding twitter classes to the submit button so hopefully this template will be unecessary in some cases.
+
+## Bug Fixes
+
+## Breaking Changes
+
 # 0.0.11
 
 ## Features

README.md

@@ -81,7 +81,7 @@ Example data as it would be set in the controller
 	};
 ```
 ### Creating Forms
-Forms can be customized with the options below.
+Forms can be customized with the options below. Note, you can configure this on a form-by-form basis as shown in the example, or globally using the [`formlyOptionsProvider`](#global-config).
 
 #### uniqueFormId (string, required)
 >`uniqueFormId` is used to identify the form.
@@ -92,6 +92,9 @@ Forms can be customized with the options below.
 #### submitCopy (string, optional)
 >`submitCopy` customizes the submit button copy. Defaults to 'Submit'.
 
+#### submitButtonTemplate (string, optional)
+>`submitButtonTemplate` customizes the template used for the submit button. Compiled on the scope, so you have access to all other options (and any custom options) in your custom template.
+
 ### Creating Form Fields
 When constructing fields use the options below to customize each field object. You must set at least a `type`, `template`, or `templateUrl`.
 
@@ -400,9 +403,11 @@ _Example password field_
 
 ### Global Config
 
+#### formlyTemplateProvider
+
 You can configure formly to use custom templates for specified types (your own "text" template) by injecting the `formlyTemplateProvider` in your app's `config` function. The `formlyTemplateProvider` has the following functions:
 
-#### setTemplateUrl
+##### setTemplateUrl
 
 Allows you to set a template
 
@@ -418,7 +423,7 @@ formlyTemplateProvider.setTemplate({
 });
 ```
 
-#### getTemplateUrl
+##### getTemplateUrl
 
 Allows you to get the template
 
@@ -427,6 +432,30 @@ formlyTemplateProvider.setTemplateUrl('radio', 'views/custom-formly-radio.html')
 formlyTemplateProvider.getTemplateUrl('radio') === 'views/custom-formly-radio.html'; // true
 ```
 
+#### formlyOptionsProvider
+
+You can configure default options for all forms using the `formlyOptionsProvider` in your app's `config` function. This has the following api:
+
+##### setOption
+
+Allows you to set an option
+
+```javascript
+formlyOptionsProvider.setOption('uniqueFormId', 'probablyDontWantToDoThis');
+formlyOptionsProvider.setOption('submitCopy', 'Save');
+
+// the same can be accomplished with
+
+formlyOptionsProvider.setOption({
+	submitCopy: 'Save',
+	uniqueFormId: 'probablyDontWantToDoThis'
+});
+```
+
+##### getOptions
+
+Returns a copy of the current options. This is used internally.
+
 ## Roadmap
 
 ## Release Notes

src/app.js

@@ -8,7 +8,7 @@ var app = angular.module('app', ['ng',
 
 app.constant('usingCustomTypeTemplates', window.localStorage.getItem('useCustomTypeTemplates') === 'true');
 
-app.config(function($stateProvider, $urlRouterProvider, $locationProvider, formlyTemplateProvider, usingCustomTypeTemplates) {
+app.config(function($stateProvider, $urlRouterProvider, $locationProvider, formlyTemplateProvider, formlyOptionsProvider, usingCustomTypeTemplates) {
 	$locationProvider.html5Mode(false);
 	$locationProvider.hashPrefix('!');
 
@@ -28,6 +28,18 @@ app.config(function($stateProvider, $urlRouterProvider, $locationProvider, forml
 			checkbox: 'views/custom-field-checkbox.html'
 		});
 	}
+
+	formlyOptionsProvider.setOption('uniqueFormId', 'whyConfigureUniqueId');
+	// or
+	formlyOptionsProvider.setOption({
+		submitCopy: 'Configured Submit',
+		hideSubmit: true,
+		submitButtonTemplate: [
+			'<button type="submit" class="btn btn-primary" ng-hide="options.hideSubmit">',
+				'{{options.submitCopy || "Submit"}} boo yeah!',
+			'</button>'
+		].join('')
+	});
 });
 
 app.run(function($rootScope, $state, $stateParams, $window) {

src/directives/formly-form.html

@@ -8,6 +8,7 @@
 				  ng-hide="field.hide">
 	</formly-field>
 	<button type="submit"
+			class="btn btn-primary"
 			ng-hide="options.hideSubmit">
 		{{options.submitCopy || "Submit"}}
 	</button>

src/directives/formly-form.js

@@ -1,19 +1,23 @@
 'use strict';
 angular.module('formly.render')
-.directive('formlyForm', function formlyForm() {
+.directive('formlyForm', function formlyForm(formlyOptions, $compile) {
 	return {
 		restrict: 'AE',
 		templateUrl: 'directives/formly-form.html',
 		replace: true,
 		scope: {
-			fields: '=fields',
-			options: '=options',
-			result: '=result',
+			fields: '=',
+			options: '=?',
+			result: '=',
 			formOnParentScope: '=name'
 		},
 		compile: function (scope, iElement, iAttrs, controller, transcludeFn) {
 			return {
 				post: function (scope, ele, attr, controller) {
+					scope.options = angular.extend(formlyOptions.getOptions(), scope.options);
+					if (scope.options.submitButtonTemplate) {
+						ele.find('button').replaceWith($compile(scope.options.submitButtonTemplate)(scope));
+					}
 					//Post gets called after angular has created the FormController
 					//Now pass the FormController back up to the parent scope
 					scope.formOnParentScope = scope[attr.name];

src/index.html

@@ -41,5 +41,6 @@
 		<script src="directives/formly-form.js"></script>
 		<script src="directives/formly-field.js"></script>
 		<script src="providers/formly-template.js"></script>
+		<script src="providers/formly-options.js"></script>
 	</body>
 </html>

src/providers/formly-options.js

@@ -0,0 +1,33 @@
+'use strict';
+angular.module('formly.render')
+.provider('formlyOptions', function() {
+
+	var options = {
+		uniqueFormId: null,
+		submitCopy: "Submit",
+		hideSubmit: false,
+		submitButtonTemplate: null
+	};
+
+	function setOption(name, value) {
+		if (typeof name === 'string') {
+			options[name] = value;
+		} else {
+			angular.forEach(name, function(val, name) {
+				setOption(name, val);
+			});
+		}
+	}
+
+	function getOptions() {
+		// copy to avoid third-parties manipulating the options outside of the api.
+		return angular.copy(options);
+	}
+
+	this.setOption = setOption;
+	this.getOptions = getOptions;
+	this.$get = function formlyOptions() {
+		return this;
+	}
+	
+});

src/providers/formly-template.js

@@ -19,7 +19,7 @@ angular.module('formly.render')
 			templateMap[name] = templateUrl;
 		} else {
 			angular.forEach(name, function(templateUrl, name) {
-				setTemplateUrl(name, templateUrl)
+				setTemplateUrl(name, templateUrl);
 			});
 		}
 	}

src/views/home.html

@@ -106,6 +106,9 @@ <h3>Form State</h3>
 				</tbody>
 
 			</table>
+
+			<h3>Configured Default Options</h3>
+			<div hljs source="preConfiguredOptions|json"></div>
 		</div>
 	</div>
 </div>

src/views/home.js

@@ -1,5 +1,5 @@
 'use strict';
-app.controller('home', function($scope, $parse, $rootScope, $window, usingCustomTypeTemplates) {
+app.controller('home', function($scope, $parse, formlyOptions, $window, usingCustomTypeTemplates) {
 	// Public Methods
 	$scope.onSubmit = function onSubmit() {
 		$scope.submittedData = $scope.formData;
@@ -29,8 +29,6 @@ app.controller('home', function($scope, $parse, $rootScope, $window, usingCustom
 			$scope.formFields = $parse(newValue)({});
 			$scope.formFieldsError = false;
 		} catch (e) {
-			// eat $parse error
-			// console.log('Formly Demo App Error: error parsing data, changes not applied');
 			$scope.formFieldsError = true;
 		}
 	});
@@ -39,8 +37,6 @@ app.controller('home', function($scope, $parse, $rootScope, $window, usingCustom
 			$scope.formOptions = $parse(newValue)({});
 			$scope.formOptionsError = false;
 		} catch (e) {
-			// eat $parse error
-			// console.log('Formly Demo App Error: error parsing data, changes not applied');
 			$scope.formOptionsError = true;
 		}
 	});
@@ -52,6 +48,8 @@ app.controller('home', function($scope, $parse, $rootScope, $window, usingCustom
 		$scope.typeTemplatesButton = 'Use Custom Type Templates';
 	}
 
+	$scope.preConfiguredOptions = formlyOptions.getOptions();
+
 	$scope.formFields = [{
 		key: 'firstName',
 		type: 'text',
@@ -179,7 +177,8 @@ app.controller('home', function($scope, $parse, $rootScope, $window, usingCustom
 
 	$scope.formOptions = {
 		uniqueFormId: 'formly',
-		submitCopy: 'Save'
+		submitCopy: 'Save',
+		hideSubmit: false
 	};
 	$scope.submittedData = null;
 	$scope.formData = {};