Adding formlyOptionsProvider to configure global options for formly

Author: Kent C. Dodds

CHANGELOG.md

@@ -1,5 +1,15 @@
 Version numbers correspond to `bower.json` version
 
+# 0.0.12
+
+## Features
+
+Adding the `formlyOptionsProvider` which allows developers to set default form options.
+
+## 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.
@@ -400,9 +400,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 +420,7 @@ formlyTemplateProvider.setTemplate({
 });
 ```
 
-#### getTemplateUrl
+##### getTemplateUrl
 
 Allows you to get the template
 
@@ -427,6 +429,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,13 @@ 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
+	});
 });
 
 app.run(function($rootScope, $state, $stateParams, $window) {

src/directives/formly-form.js

@@ -1,6 +1,6 @@
 'use strict';
 angular.module('formly.render')
-.directive('formlyForm', function formlyForm() {
+.directive('formlyForm', function formlyForm(formlyOptions) {
 	return {
 		restrict: 'AE',
 		templateUrl: 'directives/formly-form.html',
@@ -21,6 +21,7 @@ angular.module('formly.render')
 			}
 		},
 		controller: function($scope, $element, $parse) {
+			$scope.options = angular.extend(formlyOptions.getOptions(), $scope.options);
 			$scope.$watch('result', function(newValue) {
 			angular.forEach($scope.fields, function(field, index) {
 					if (field.hideExpression) {

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,32 @@
+'use strict';
+angular.module('formly.render')
+.provider('formlyOptions', function() {
+
+	var options = {
+		uniqueFormId: null,
+		submitCopy: "Submit",
+		hideSubmit: false
+	};
+
+	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/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 = {};