Closes #37. Allows people to reduce their watch count. Changed how the template works for a formly-form a little bit...

Author: Kent C. Dodds

CHANGELOG.md

@@ -3,6 +3,7 @@ Version numbers correspond to `bower.json` version
 
 - Now providing the `result` to each field template authors have the power to associate other values of the result set with the template
 - Adding `requiredExpression` to field options and assinging the field's `required` property based on its evaluation. Works very much like `hideExpression`
+- Added option to use `ng-if` instead of `ng-hide` to hide fields.
 
 # 0.0.14
 

README.md

@@ -473,21 +473,29 @@ formlyTemplateProvider.getTemplateUrl('radio') === 'views/custom-formly-radio.ht
 
 #### formlyOptionsProvider
 
-You can configure default options for all forms using the `formlyOptionsProvider` in your app's `config` function. This has the following api:
+You can configure default options for all forms using the `formlyOptionsProvider` in your app's `config` function. The following options are used by angular-formly and are available for configuration:
+
+- uniqueFormId - not useful for global configuration, but useful on a per-form basis. Defaults to null
+- submitCopy - what the submit button should say. Defaults to "Submit"
+- hideSubmit - whether to hide the submit button. Defaults to false
+- submitButtonTemplate - a custom template for the submit button. Defaults to null
+- useNgIfToHide - whether to use `ng-if` for hiding fields (rather than `ng-hide`). Useful for removing watchers. Defaults to false (use `ng-hide`)
+
+To change these defaults globally, you have the following api:
 
 ##### setOption
 
 Allows you to set an option
 
 ```javascript
-formlyOptionsProvider.setOption('uniqueFormId', 'probablyDontWantToDoThis');
+formlyOptionsProvider.setOption('useNgIfToHide', true);
 formlyOptionsProvider.setOption('submitCopy', 'Save');
 
 // the same can be accomplished with
 
 formlyOptionsProvider.setOption({
 	submitCopy: 'Save',
-	uniqueFormId: 'probablyDontWantToDoThis'
+	useNgIfToHide: true
 });
 ```
 

src/directives/formly-field.html

@@ -1,23 +1,50 @@
 'use strict';
 angular.module('formly.render')
 .directive('formlyForm', function formlyForm(formlyOptions, $compile) {
+	var templateHide = 'ng-hide="field.hide"';
+	var fieldsTemplate = [
+		'<formly-field ng-repeat="field in fields"',
+					  'options="field"',
+					  'form-result="result"',
+					  'form-value="result[field.key||$index]"',
+					  'form-id="options.uniqueFormId"',
+					  'ng-hide="field.hide"',
+					  'index="$index">',
+		'</formly-field>'
+	].join(' ')
 	return {
 		restrict: 'AE',
-		templateUrl: 'directives/formly-form.html',
+		template: function(el, attr) {
+			var useNgIf = formlyOptions.getOptions().useNgIfToHide;
+			return [
+				'<form class="formly" role="form">',
+					'<div class="ng-hide">fields</div>',
+					'<button type="submit"',
+							'ng-show="!options.hideSubmit">',
+						'{{options.submitCopy || "Submit"}}',
+					'</button>',
+				'</form>'
+			].join(' ');
+		},
 		replace: true,
 		scope: {
 			fields: '=',
 			options: '=?',
 			result: '=',
 			formOnParentScope: '=name'
 		},
-		compile: function (scope, iElement, iAttrs, controller, transcludeFn) {
+		compile: function () {
 			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));
 					}
+					var template = fieldsTemplate;
+					if (scope.options.useNgIfToHide) {
+						template = template.replace(templateHide, 'ng-if="!field.hide"');
+					}
+					ele.find('div').replaceWith($compile(template)(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/directives/formly-form.html

@@ -6,7 +6,8 @@ angular.module('formly.render')
 		uniqueFormId: null,
 		submitCopy: "Submit",
 		hideSubmit: false,
-		submitButtonTemplate: null
+		submitButtonTemplate: null,
+		useNgIfToHide: false
 	};
 
 	function setOption(name, value) {

src/directives/formly-form.js

@@ -204,7 +204,8 @@ app.controller('home', function($scope, $parse, formlyOptions, $window, usingCus
 	$scope.formOptions = {
 		uniqueFormId: 'formly',
 		submitCopy: 'Save',
-		hideSubmit: false
+		hideSubmit: false,
+		useNgIfToHide: true
 	};
 	$scope.hiddenFormOptions = {
 		uniqueFormId: 'hiddenFormly',