Add fieldId lookup based on #560 and #742

Author: Anthropic

src/directives/field.js

@@ -8,9 +8,13 @@ sfPath, sfSelect) {
     replace: false,
     transclude: false,
     scope: true,
-    require: '^sfSchema',
+    require: ['^sfSchema', '?^form', '?^^sfKeyController'],
     link: {
-      pre: function(scope, element, attrs, sfSchema) {
+      pre: function(scope, element, attrs, ctrl) {
+        var sfSchema = ctrl[0];
+        var formCtrl = ctrl[1];
+        var keyCtrl = ctrl[2];
+
         //The ngModelController is used in some templates and
         //is needed for error messages,
         scope.$on('schemaFormPropagateNgModelController', function(event, ngModel) {
@@ -22,12 +26,35 @@ sfPath, sfSelect) {
         // Fetch our form.
         scope.form = sfSchema.lookup['f' + attrs.sfField];
       },
-      post: function(scope, element, attrs, sfSchema) {
+      post: function(scope, element, attrs, ctrl) {
+        var sfSchema = ctrl[0];
+        var formCtrl = ctrl[1];
+        var keyCtrl = ctrl[2];
+
         //Keep error prone logic from the template
         scope.showTitle = function() {
           return scope.form && scope.form.notitle !== true && scope.form.title;
         };
 
+        //Normalise names and ids
+        scope.fieldId = function(prependFormName, omitArrayIndexes) {
+          var key = scope.parentKey || [];
+          if(scope.form.key) {
+            if(typeof key[key.length-1] === 'number') {
+              var combinedKey = key.concat(scope.form.key.slice(-1));
+              var formName = (prependFormName && formCtrl && formCtrl.$name) ? formCtrl.$name : undefined;
+              return sfPath.name(combinedKey, '-', formName, omitArrayIndexes);
+            }
+            else {
+              var formName = (prependFormName && formCtrl && formCtrl.$name) ? formCtrl.$name : undefined;
+              return sfPath.name(scope.form.key, '-', formName, omitArrayIndexes);
+            }
+          }
+          else {
+            return '';
+          }
+        };
+
         scope.listToCheckboxValues = function(list) {
           var values = {};
           angular.forEach(list, function(v) {
@@ -155,6 +182,10 @@ sfPath, sfSelect) {
           );
         };
 
+        // append the field-id to the htmlClass
+        scope.form.htmlClass = scope.form.htmlClass || '';
+        scope.form.htmlClass += (scope.form.htmlClass ? ' ' : '') + scope.fieldId(false, true);
+
         var form = scope.form;
 
         // Where there is a key there is probably a ngModel

src/directives/keyController.js

@@ -0,0 +1,20 @@
+/**
+ * Directive that handles keys and array indexes
+ */
+export default function(schemaForm, sfPath) {
+  return {
+    scope: true,
+    require: ['^^sfNewArray'],
+    link: function(scope, element, attrs, ctrl) {
+      var currentKey = sfPath.parse(attrs.sfParentKey);
+      if(currentKey.length > 1) currentKey = currentKey.splice(-1);
+
+      scope.parentKey = scope.parentKey || [];
+      scope.parentKey = scope.parentKey.concat(currentKey, Number(attrs.sfIndex));
+
+      scope.arrayIndex = Number(attrs.sfIndex);
+      scope.arrayIndices = scope.arrayIndices || [];
+      scope.arrayIndices = scope.arrayIndices.concat(scope.arrayIndex);
+    }
+  };
+};

src/directives/newArray.js

@@ -5,7 +5,10 @@ import angular from 'angular';
  */
 export default function(sel, sfPath, schemaForm) {
   return {
-    scope: false,
+    scope: true,
+    controller: ['$scope', function SFArrayController($scope) {
+      this.key = ($scope.form && $scope.form.key) ? $scope.form.key : [];
+    }],
     link: function(scope, element, attrs) {
       scope.min = 0;
 

src/module.js

@@ -13,6 +13,7 @@ import changed from './directives/changed';
 import field from './directives/field';
 import message from './directives/message';
 import newArray from './directives/newArray';
+import keyController from './directives/keyController';
 import schemaFormDirective from './directives/schemaForm';
 import schemaValidate from './directives/schemaValidate';
 
@@ -58,4 +59,5 @@ angular.module('schemaForm', deps)
 .directive('sfSchema', [ '$compile', '$http', '$templateCache', '$q', 'schemaForm',
                         'schemaFormDecorators', 'sfSelect', 'sfPath', 'sfBuilder',
                         schemaFormDirective ])
-.directive('schemaValidate', [ 'sfValidator', '$parse', 'sfSelect', schemaValidate ]);
+.directive('schemaValidate', [ 'sfValidator', '$parse', 'sfSelect', schemaValidate ])
+.directive('sfKeyController', [ 'schemaForm','sfPath', keyController ]);

src/services/builder.js

@@ -141,6 +141,11 @@ export default function(sfPathProvider) {
     },
     array: function(args) {
       var items = args.fieldFrag.querySelector('[schema-form-array-items]');
+
+      if (args.form.key) {
+        var arrayDepth = args.form.key.filter(function(e) { return e === '' }).length;
+      }
+
       if (items) {
         var state = angular.copy(args.state);
         state.keyRedaction = 0;
@@ -222,6 +227,7 @@ export default function(sfPathProvider) {
     };
 
     var build = function(items, decorator, templateFn, slots, path, state, lookup) {
+      state = state || {};
       state = state || {};
       lookup = lookup || Object.create(null);
       path = path || 'schemaForm.form';

src/services/decorators.js

@@ -40,8 +40,10 @@ export default function($compileProvider, sfPathProvider) {
           replace: false,
           transclude: false,
           scope: true,
-          require: '?^sfSchema',
-          link: function(scope, element, attrs, sfSchema) {
+          require: ['^sfSchema', '?^form'],
+          link: function(scope, element, attrs, ctrl) {
+            var sfSchema = ctrl[0];
+            var formCtrl = ctrl[1];
 
             //The ngModelController is used in some templates and
             //is needed for error messages,
@@ -56,6 +58,25 @@ export default function($compileProvider, sfPathProvider) {
               return scope.form && scope.form.notitle !== true && scope.form.title;
             };
 
+            //Normalise names and ids
+            scope.fieldId = function(prependFormName, omitArrayIndexes) {
+              var key = scope.parentKey || [];
+              if(scope.form.key) {
+                if(typeof key[key.length-1] === 'number') {
+                  var combinedKey = key.concat(scope.form.key.slice(-1));
+                  var formName = (prependFormName && formCtrl && formCtrl.$name) ? formCtrl.$name : undefined;
+                  return sfPath.name(combinedKey, '-', formName, omitArrayIndexes);
+                }
+                else {
+                  var formName = (prependFormName && formCtrl && formCtrl.$name) ? formCtrl.$name : undefined;
+                  return sfPath.name(scope.form.key, '-', formName, omitArrayIndexes);
+                }
+              }
+              else {
+                return '';
+              }
+            };
+
             scope.listToCheckboxValues = function(list) {
               var values = {};
               angular.forEach(list, function(v) {