Adding submitButtonTemplate to customize the submit button.

Author: Kent C. Dodds

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

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`.
 

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: [
+			'<button type="submit" class="btn btn-primary" ng-hide="options.hideSubmit">',
+				'{{options.submitCopy || "Submit"}} boo yeah!',
+			'</button>'
+		].join('')
 	});
 });
 

src/directives/formly-form.html

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

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,14 +14,17 @@ 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];
 				}
 			}
 		},
 		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/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) {