Merge pull request #39 from kentcdodds/master

Adding watch property to fields

Author: ghelton

CHANGELOG.md

@@ -8,6 +8,8 @@ Adding the `formlyOptionsProvider` which allows developers to set default form o
 
 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.
 
+Adding the `watch` property which has both `expression` and `listener` properties. Formly will set a watcher on its own scope. If the `watch.expression` is a function, it will be wrapped and the first argument to that expression function will be the field, the rest will be the normal watch expression definition. The same is true for `listener`.
+
 ## Bug Fixes
 
 ## Breaking Changes

README.md

@@ -178,6 +178,23 @@ When constructing fields use the options below to customize each field object. Y
 ###### Default
 >`undefined`
 
+---
+##### watch.expression (object)
+>`watch` has two properties called `expression` and `listener`. The `watch.expression` is added to the formly directive's scope. If it's a function, it will be wrapped and called with the field as the first argument, followed by the normal arguments for a watcher. The `listener` will also be wrapped and called with the field as the first argument, followed by hte normal arguments for a watch listener.
+
+For example:
+
+```javascript
+// normal watcher
+$scope.$watch(function expression(theScope) {}, function listener(newValue, oldValue, theScope) {});
+
+// field watcher
+$scope.$watch(function expression(field, theScope) {}, function listener(field, newValue, oldValue, theScope) {});
+```
+
+###### Default
+>`undefined`
+
 ### Form Fields
 Below is a detailed description of each form fields and its custom properties.
 

src/directives/formly-form.js

@@ -25,11 +25,31 @@ angular.module('formly.render')
 			}
 		},
 		controller: function($scope, $element, $parse) {
-			$scope.$watch('result', function(newValue) {
+			// setup watches for watchExpressions
 			angular.forEach($scope.fields, function(field, index) {
+				if (angular.isDefined(field.watch)) {
+					var watchExpression = field.watch.expression;
+					if (angular.isFunction(watchExpression)) {
+						// wrap the field's watch expression so we can call it with the field as the first arg as a helper
+						watchExpression = function() {
+							var args = Array.prototype.slice.call(arguments, 0);
+							args.unshift(field);
+							return field.watch.expression.apply(this, args);
+						}
+					}
+
+					$scope.$watch(watchExpression, function() {
+						// wrap the field's watch listener so we can call it with the field as the first arg as a helper
+						var args = Array.prototype.slice.call(arguments, 0);
+						args.unshift(field);
+						return field.watch.listener.apply(this, args);
+					});
+				}
+			});
+			$scope.$watch('result', function(newValue) {
+				angular.forEach($scope.fields, function(field, index) {
 					if (field.hideExpression) {
-						var getter = $parse(field.hideExpression);
-						field.hide = getter($scope.result);
+						field.hide = $parse(field.hideExpression)($scope.result);
 					}
 				});
 			}, true);

src/views/home.html

@@ -68,6 +68,12 @@ <h3>Form</h3>
 			             options="formOptions"
 			             ng-submit="onSubmit()">
 			</formly-form>
+			<br />
+			<br />
+			<formly-form name="hiddenFormlyForm"
+						 result="hiddenFormData"
+						 fields="hiddenFormFields"
+						 options="hiddenFormOptions">
 		</div>
 		<div class="col-sm-4 col-md-4 col-lg-4">
 

src/views/home.js

@@ -175,13 +175,35 @@ app.controller('home', function($scope, $parse, formlyOptions, $window, usingCus
 		default: 'secret_code'
 	}];
 
+	$scope.hiddenFormFields = [
+		{
+			key: 'field',
+			type: 'textarea',
+			label: 'This is a special form field',
+			placeholder: 'It has a watch property with an expression function that depends on something outside the result...',
+			watch: {
+				expression: function(field) {
+					return !/joe/ig.test($scope.formData.hiddenWhenUnchecked);
+				},
+				listener: function(field, _new) {
+					field.hide = _new;
+				}
+			}
+		}
+	];
+
 	$scope.formOptions = {
 		uniqueFormId: 'formly',
 		submitCopy: 'Save',
 		hideSubmit: false
 	};
+	$scope.hiddenFormOptions = {
+		uniqueFormId: 'hiddenFormly',
+		hideSubmit: true
+	};
 	$scope.submittedData = null;
 	$scope.formData = {};
+	$scope.hiddenFormData = {};
 	$scope.formFieldsStr = $scope.toPrettyJSON($scope.formFields, 4);
 	$scope.formOptionsStr = $scope.toPrettyJSON($scope.formOptions, 4);
 	$scope.formFieldsError = false;