From de2835c6e267d394a8c1ce9ef5ea09611585da64 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 18 Jun 2014 10:26:29 -0600 Subject: [PATCH 1/5] Adding formlyOptionsProvider to configure global options for formly --- CHANGELOG.md | 10 ++++++++++ README.md | 32 +++++++++++++++++++++++++++++--- src/app.js | 9 ++++++++- src/directives/formly-form.js | 3 ++- src/index.html | 1 + src/providers/formly-options.js | 32 ++++++++++++++++++++++++++++++++ src/views/home.html | 3 +++ src/views/home.js | 11 +++++------ 8 files changed, 90 insertions(+), 11 deletions(-) create mode 100644 src/providers/formly-options.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 01935acb..1c4579c9 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README.md b/README.md index c90ae9f5..a49a1a0c 100644 --- a/README.md +++ b/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 diff --git a/src/app.js b/src/app.js index 06d2997f..838b8570 100644 --- a/src/app.js +++ b/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) { diff --git a/src/directives/formly-form.js b/src/directives/formly-form.js index 25a8bdb8..01e2c0d8 100644 --- a/src/directives/formly-form.js +++ b/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) { diff --git a/src/index.html b/src/index.html index 5f518f1a..04775a08 100644 --- a/src/index.html +++ b/src/index.html @@ -41,5 +41,6 @@ + \ No newline at end of file diff --git a/src/providers/formly-options.js b/src/providers/formly-options.js new file mode 100644 index 00000000..c461bac9 --- /dev/null +++ b/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; + } + +}); \ No newline at end of file diff --git a/src/views/home.html b/src/views/home.html index 60ad96fd..6f9bc7d3 100644 --- a/src/views/home.html +++ b/src/views/home.html @@ -106,6 +106,9 @@

Form State

+ +

Configured Default Options

+
diff --git a/src/views/home.js b/src/views/home.js index b32427bc..776e6167 100644 --- a/src/views/home.js +++ b/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 = {}; From 7c88db90ba8e2fe14227a691fa6ff95545ff42d6 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 18 Jun 2014 10:27:29 -0600 Subject: [PATCH 2/5] Styling the submit button with a reasonable default --- src/directives/formly-form.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/directives/formly-form.html b/src/directives/formly-form.html index 837c00bf..441df38a 100644 --- a/src/directives/formly-form.html +++ b/src/directives/formly-form.html @@ -7,7 +7,7 @@ index="$index" ng-hide="field.hide"> - From d8d818071e32c7fac0b8640e6c22a6bcace5e8ab Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 18 Jun 2014 10:47:56 -0600 Subject: [PATCH 3/5] Fixing missing semi-colon --- src/providers/formly-template.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/providers/formly-template.js b/src/providers/formly-template.js index 24934c64..583c3ac7 100644 --- a/src/providers/formly-template.js +++ b/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); }); } } From 6d8da6b4558a2fc42fa528a83249c16c00818fe2 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 18 Jun 2014 10:48:24 -0600 Subject: [PATCH 4/5] Adding submitButtonTemplate to customize the submit button. --- CHANGELOG.md | 2 ++ README.md | 3 +++ src/app.js | 7 ++++++- src/directives/formly-form.html | 3 ++- src/directives/formly-form.js | 7 +++++-- src/providers/formly-options.js | 3 ++- 6 files changed, 20 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1c4579c9..37c1b251 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,8 @@ Version numbers correspond to `bower.json` version 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 diff --git a/README.md b/README.md index a49a1a0c..aa618ca2 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,9 @@ Forms can be customized with the options below. Note, you can configure this on #### 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`. diff --git a/src/app.js b/src/app.js index 838b8570..7dfe5f3a 100644 --- a/src/app.js +++ b/src/app.js @@ -33,7 +33,12 @@ app.config(function($stateProvider, $urlRouterProvider, $locationProvider, forml // or formlyOptionsProvider.setOption({ submitCopy: 'Configured Submit', - hideSubmit: true + hideSubmit: true, + submitButtonTemplate: [ + '' + ].join('') }); }); diff --git a/src/directives/formly-form.html b/src/directives/formly-form.html index 441df38a..1ac355f3 100644 --- a/src/directives/formly-form.html +++ b/src/directives/formly-form.html @@ -7,7 +7,8 @@ index="$index" ng-hide="field.hide"> - diff --git a/src/directives/formly-form.js b/src/directives/formly-form.js index 01e2c0d8..d8de6bb2 100644 --- a/src/directives/formly-form.js +++ b/src/directives/formly-form.js @@ -1,6 +1,6 @@ 'use strict'; angular.module('formly.render') -.directive('formlyForm', function formlyForm(formlyOptions) { +.directive('formlyForm', function formlyForm(formlyOptions, $compile) { return { restrict: 'AE', templateUrl: 'directives/formly-form.html', @@ -14,6 +14,10 @@ angular.module('formly.render') 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]; @@ -21,7 +25,6 @@ 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) { diff --git a/src/providers/formly-options.js b/src/providers/formly-options.js index c461bac9..8bf8a895 100644 --- a/src/providers/formly-options.js +++ b/src/providers/formly-options.js @@ -5,7 +5,8 @@ angular.module('formly.render') var options = { uniqueFormId: null, submitCopy: "Submit", - hideSubmit: false + hideSubmit: false, + submitButtonTemplate: null }; function setOption(name, value) { From 8e9fbc1cab552ecb6f86b6cff808151ebad11c51 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Wed, 18 Jun 2014 11:08:37 -0600 Subject: [PATCH 5/5] Fixing some naming of scope variables and making options optional (now that you can set app-wide config this makes a lot of sense). --- src/directives/formly-form.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/directives/formly-form.js b/src/directives/formly-form.js index d8de6bb2..56f91e8b 100644 --- a/src/directives/formly-form.js +++ b/src/directives/formly-form.js @@ -6,9 +6,9 @@ angular.module('formly.render') 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) {