Adding documentation for the new hide property on fields

Author: Kent C. Dodds

CHANGELOG.md

@@ -1,5 +1,15 @@
 Version numbers correspond to `bower.json` version
 
+# 0.0.10
+
+## Features
+
+Added `hide` property on fields. Allows devs to conditionally show fields.
+
+## Bug Fixes
+
+## Breaking Changes
+
 # 0.0.1
 
 ## Features

README.md

@@ -57,6 +57,7 @@ Example data as it would be set in the controller
 			label: 'Password',
 			required: true,
 			disabled: false, //default: false
+			hide: true, // see watch below
 		}
 
 	];
@@ -78,6 +79,10 @@ Example data as it would be set in the controller
 	$scope.onSubmit = function() {
 		console.log('form submitted:', $scope.formData);
 	};
+
+	$scope.$watch('!formData.username', function(isBlank) {
+		$scope.formFields[1].hide = !isBlank;
+	});
 ```
 ### Creating Forms
 Forms can be customized with the options below.
@@ -146,6 +151,13 @@ When constructing fields use the options below to customize each field object. Y
 ###### Default
 >`undefined`
 
+---
+##### hide (boolean)
+>`hide` when true, the input is hidden (meant to be used with a watch). In the example above, the password field would be hidden until username has a value.
+
+###### Default
+>`undefined`
+
 ---
 ##### disabled (boolean)
 >`disabled` is used to add the disabled attribute to a form field.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-formly",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "authors": [
     "Grant Helton <[email protected]>"
   ],

dist/formly.js

@@ -49,12 +49,12 @@ angular.module('formly.render').directive('formlyField', [
       transclude: true,
       scope: {
         optionsData: '&options',
-        formId: '@formId',
-        index: '@index',
+        formId: '=formId',
+        index: '=index',
         value: '=formValue'
       },
       link: function fieldLink($scope, $element, $attr) {
-        var templateUrl = getTemplateUrl($scope.options.type);
+        var templateUrl = $scope.options.templateUrl || getTemplateUrl($scope.options.type);
         if (templateUrl) {
           $http.get(templateUrl, { cache: $templateCache }).success(function (data) {
             //template data returned
@@ -69,7 +69,7 @@ angular.module('formly.render').directive('formlyField', [
         '$scope',
         function fieldController($scope) {
           $scope.options = $scope.optionsData();
-          if ($scope.options.default) {
+          if (typeof $scope.options.default !== 'undefined') {
             $scope.value = $scope.options.default;
           }
           // set field id to link labels and fields
@@ -86,18 +86,11 @@ angular.module('formly.render').directive('formlyForm', function formlyForm() {
     templateUrl: 'directives/formly-form.html',
     replace: true,
     scope: {
-      formId: '@formId',
       fields: '=fields',
       options: '=options',
       result: '=result',
       formOnParentScope: '=name'
     },
-    controller: [
-      '$scope',
-      '$element',
-      function formController($scope, $element) {
-      }
-    ],
     compile: function (scope, iElement, iAttrs, controller, transcludeFn) {
       return {
         post: function (scope, ele, attr, controller) {
@@ -123,6 +116,6 @@ angular.module('formly.render').run([
     $templateCache.put('directives/formly-field-text.html', '<div class=form-group><label for={{id}}>{{options.label || \'Text\'}} {{options.required ? \'*\' : \'\'}}</label><input class=form-control id={{id}} placeholder={{options.placeholder}} ng-required=options.required ng-disabled=options.disabled ng-model=value></div>');
     $templateCache.put('directives/formly-field-textarea.html', '<div class=form-group><label for={{id}}>{{options.label || \'Text\'}} {{options.required ? \'*\' : \'\'}}</label><textarea type=text class=form-control id={{id}} rows={{options.lines}} placeholder={{options.placeholder}} ng-required=options.required ng-disabled=options.disabled ng-model=value>\n' + '\t</textarea></div>');
     $templateCache.put('directives/formly-field.html', '');
-    $templateCache.put('directives/formly-form.html', '<form class=formly role=form><formly-field ng-repeat="field in fields" options=field form-value=result[field.key||$index] class=formly-field form-id={{options.uniqueFormId}} index={{$index}}></formly-field><button type=submit ng-hide=options.hideSubmit>{{options.submitCopy || "Submit"}}</button></form>');
+    $templateCache.put('directives/formly-form.html', '<form class=formly role=form><formly-field ng-repeat="field in fields" options=field form-value=result[field.key||$index] class=formly-field form-id=options.uniqueFormId index=$index ng-hide=field.hide></formly-field><button type=submit ng-hide=options.hideSubmit>{{options.submitCopy || "Submit"}}</button></form>');
   }
 ]);

dist/formly.min.js

@@ -142,7 +142,12 @@ app.controller('home', function($scope, $parse, $rootScope) {
 	}, {
 		key: 'checkThis',
 		type: 'checkbox',
-		label: 'Check this here'
+		label: 'Check this here (to reveal something secret...)'
+	}, {
+		key: 'hiddenWhenUnchecked',
+		type: 'text',
+		label: 'Conditional input',
+		hide: true
 	}, {
 		key:'secretCode',
 		type: 'hidden',
@@ -159,4 +164,12 @@ app.controller('home', function($scope, $parse, $rootScope) {
 	$scope.formOptionsStr = $scope.toPrettyJSON($scope.formOptions, 4);
 	$scope.formFieldsError = false;
 	$scope.formOptionsError = false;
+	var hiddenWhenUncheckedIndex = 0;
+	$scope.formFields.some(function(field, index) {
+		hiddenWhenUncheckedIndex = index;
+		return field.key === 'hiddenWhenUnchecked';
+	});
+	$scope.$watch('formData.checkThis', function(isChecked) {
+		$scope.formFields[hiddenWhenUncheckedIndex].hide = !isChecked;
+	});
 });