fieldId()'s for names and ids

plong0 · plong0 · commit 89f4ac892197 · 2015-09-29T00:44:46.000-07:00
diff --git a/dist/bootstrap-decorator.js b/dist/bootstrap-decorator.js
diff --git a/dist/schema-form.js b/dist/schema-form.js
@@ -463,8 +463,10 @@ angular.module('schemaForm').provider('schemaFormDecorators',
           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,
@@ -589,6 +591,19 @@ angular.module('schemaForm').provider('schemaFormDecorators',
               );
             };
 
+            scope.fieldId = function(prependFormName, omitNumbers) {
+              if(scope.form.key){
+                var fieldKey = scope.form.key;
+                if(omitNumbers){
+                  fieldKey = fieldKey.filter(function(key){
+                    return !angular.isNumber(key);
+                  });
+                }
+                return ((prependFormName && formCtrl && formCtrl.$name)?formCtrl.$name+'-':'')+fieldKey.join('-');
+              }
+              return '';
+            };
+
             // Rebind our part of the form to the scope.
             var once = scope.$watch(attrs.form, function(form) {
               if (form) {
@@ -598,6 +613,10 @@ angular.module('schemaForm').provider('schemaFormDecorators',
                 form.ngModelOptions = form.ngModelOptions || {};
                 scope.form  = form;
 
+                // append the field-id to the htmlClass
+                if(!scope.form.htmlClass){ scope.form.htmlClass = ''; }
+                scope.form.htmlClass += (scope.form.htmlClass?' ':'')+scope.fieldId(false, true);
+
                 //ok let's replace that template!
                 //We do this manually since we need to bind ng-model properly and also
                 //for fieldsets to recurse properly.
@@ -1928,9 +1947,12 @@ angular.module('schemaForm').directive('sfField',
         replace: false,
         transclude: false,
         scope: true,
-        require: '^sfSchema',
+        require: ['^sfSchema', '?^form'],
         link: {
-          pre: function(scope, element, attrs, sfSchema) {
+          pre: 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,
             scope.$on('schemaFormPropagateNgModelController', function(event, ngModel) {
@@ -1942,12 +1964,16 @@ angular.module('schemaForm').directive('sfField',
             // 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];
+
             //Keep error prone logic from the template
             scope.showTitle = function() {
               return scope.form && scope.form.notitle !== true && scope.form.title;
             };
 
+
             scope.listToCheckboxValues = function(list) {
               var values = {};
               angular.forEach(list, function(v) {
@@ -2073,6 +2099,23 @@ angular.module('schemaForm').directive('sfField',
               );
             };
 
+            scope.fieldId = function(prependFormName, omitNumbers) {
+              if(scope.form.key){
+                var fieldKey = scope.form.key;
+                if(omitNumbers){
+                  fieldKey = fieldKey.filter(function(key){
+                    return !angular.isNumber(key);
+                  });
+                }
+                return ((prependFormName && formCtrl && formCtrl.$name)?formCtrl.$name+'-':'')+fieldKey.join('-');
+              }
+              return '';
+            };
+
+            // append the field-id to the htmlClass
+            if(!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
diff --git a/src/directives/decorators/bootstrap/checkbox.html b/src/directives/decorators/bootstrap/checkbox.html
@@ -8,7 +8,7 @@
            ng-model-options="form.ngModelOptions"
            schema-validate="form"
            class="{{form.fieldHtmlClass}}"
-           name="{{form.key.slice(-1)[0]}}">
+           name="{{fieldId()}}">
     <span ng-bind-html="form.title"></span>
   </label>
   <div class="help-block" sf-message="form.description"></div>
diff --git a/src/directives/decorators/bootstrap/checkboxes.html b/src/directives/decorators/bootstrap/checkboxes.html
@@ -9,7 +9,7 @@
              sf-changed="form"
              class="{{form.fieldHtmlClass}}"
              ng-model="titleMapValues[$index]"
-             name="{{form.key.slice(-1)[0]}}">
+             name="{{fieldId()}}">
       <span ng-bind-html="form.titleMap[$index].name"></span>
     </label>
 
diff --git a/src/directives/decorators/bootstrap/default.html b/src/directives/decorators/bootstrap/default.html
@@ -1,6 +1,6 @@
 <div class="form-group schema-form-{{form.type}} {{form.htmlClass}}"
      ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true && hasSuccess(), 'has-feedback': form.feedback !== false }">
-  <label class="control-label {{form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
+  <label class="control-label {{form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{fieldId(true)}}">{{form.title}}</label>
 
   <input ng-if="!form.fieldAddonLeft && !form.fieldAddonRight"
          ng-show="form.key"
@@ -9,13 +9,13 @@
          sf-changed="form"
          placeholder="{{form.placeholder}}"
          class="form-control {{form.fieldHtmlClass}}"
-         id="{{form.key.slice(-1)[0]}}"
+         id="{{fieldId(true)}}"
          ng-model-options="form.ngModelOptions"
          ng-model="$$value$$"
          ng-disabled="form.readonly"
          schema-validate="form"
-         name="{{form.key.slice(-1)[0]}}"
-         aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}">
+         name="{{fieldId()}}"
+         aria-describedby="{{fieldId(true) + 'Status'}}">
 
   <div ng-if="form.fieldAddonLeft || form.fieldAddonRight"
        ng-class="{'input-group': (form.fieldAddonLeft || form.fieldAddonRight)}">
@@ -28,13 +28,13 @@
            sf-changed="form"
            placeholder="{{form.placeholder}}"
            class="form-control {{form.fieldHtmlClass}}"
-           id="{{form.key.slice(-1)[0]}}"
+           id="{{fieldId(true)}}"
            ng-model-options="form.ngModelOptions"
            ng-model="$$value$$"
            ng-disabled="form.readonly"
            schema-validate="form"
-           name="{{form.key.slice(-1)[0]}}"
-           aria-describedby="{{form.key.slice(-1)[0] + 'Status'}}">
+           name="{{fieldId()}}"
+           aria-describedby="{{fieldId(true) + 'Status'}}">
 
     <span ng-if="form.fieldAddonRight"
           class="input-group-addon"
@@ -47,7 +47,7 @@
         aria-hidden="true"></span>
 
   <span ng-if="hasError() || hasSuccess()"
-        id="{{form.key.slice(-1)[0] + 'Status'}}"
+        id="{{fieldId(true) + 'Status'}}"
         class="sr-only">{{ hasSuccess() ? '(success)' : '(error)' }}</span>
 
   <div class="help-block" sf-message="form.description"></div>
diff --git a/src/directives/decorators/bootstrap/select.html b/src/directives/decorators/bootstrap/select.html
@@ -10,7 +10,7 @@
           class="form-control {{form.fieldHtmlClass}}"
           schema-validate="form"
           ng-options="item.value as item.name group by item.group for item in form.titleMap"
-          name="{{form.key.slice(-1)[0]}}">
+          name="{{fieldId()}}">
   </select>
   <div class="help-block" sf-message="form.description"></div>
 </div>
diff --git a/src/directives/decorators/bootstrap/textarea.html b/src/directives/decorators/bootstrap/textarea.html
@@ -1,31 +1,31 @@
 <div class="form-group has-feedback {{form.htmlClass}} schema-form-textarea" ng-class="{'has-error': form.disableErrorState !== true && hasError(), 'has-success': form.disableSuccessState !== true &&  hasSuccess()}">
-  <label class="{{form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{form.key.slice(-1)[0]}}">{{form.title}}</label>
+  <label class="{{form.labelHtmlClass}}" ng-class="{'sr-only': !showTitle()}" for="{{fieldId(true)}}">{{form.title}}</label>
 
   <textarea ng-if="!form.fieldAddonLeft && !form.fieldAddonRight"
             class="form-control {{form.fieldHtmlClass}}"
-            id="{{form.key.slice(-1)[0]}}"
+            id="{{fieldId(true)}}"
             sf-changed="form"
             placeholder="{{form.placeholder}}"
             ng-disabled="form.readonly"
             ng-model="$$value$$"
             ng-model-options="form.ngModelOptions"
             schema-validate="form"
-            name="{{form.key.slice(-1)[0]}}"></textarea>
+            name="{{fieldId()}}"></textarea>
 
   <div ng-if="form.fieldAddonLeft || form.fieldAddonRight"
        ng-class="{'input-group': (form.fieldAddonLeft || form.fieldAddonRight)}">
     <span ng-if="form.fieldAddonLeft"
           class="input-group-addon"
           ng-bind-html="form.fieldAddonLeft"></span>
     <textarea class="form-control {{form.fieldHtmlClass}}"
-              id="{{form.key.slice(-1)[0]}}"
+              id="{{fieldId(true)}}"
               sf-changed="form"
               placeholder="{{form.placeholder}}"
               ng-disabled="form.readonly"
               ng-model="$$value$$"
               ng-model-options="form.ngModelOptions"
               schema-validate="form"
-              name="{{form.key.slice(-1)[0]}}"></textarea>
+              name="{{fieldId()}}"></textarea>
     <span ng-if="form.fieldAddonRight"
           class="input-group-addon"
           ng-bind-html="form.fieldAddonRight"></span>
diff --git a/src/directives/field.js b/src/directives/field.js
@@ -9,9 +9,12 @@ angular.module('schemaForm').directive('sfField',
         replace: false,
         transclude: false,
         scope: true,
-        require: '^sfSchema',
+        require: ['^sfSchema', '?^form'],
         link: {
-          pre: function(scope, element, attrs, sfSchema) {
+          pre: 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,
             scope.$on('schemaFormPropagateNgModelController', function(event, ngModel) {
@@ -154,6 +157,23 @@ angular.module('schemaForm').directive('sfField',
               );
             };
 
+            scope.fieldId = function(prependFormName, omitNumbers) {
+              if(scope.form.key){
+                var fieldKey = scope.form.key;
+                if(omitNumbers){
+                  fieldKey = fieldKey.filter(function(key){
+                    return !angular.isNumber(key);
+                  });
+                }
+                return ((prependFormName && formCtrl && formCtrl.$name)?formCtrl.$name+'-':'')+fieldKey.join('-');
+              }
+              return '';
+            };
+
+            // append the field-id to the htmlClass
+            if(!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
diff --git a/src/services/decorators.js b/src/services/decorators.js
@@ -39,8 +39,10 @@ angular.module('schemaForm').provider('schemaFormDecorators',
           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,
@@ -149,6 +151,20 @@ angular.module('schemaForm').provider('schemaFormDecorators',
               return scope.ngModel.$invalid && !scope.ngModel.$pristine;
             };
 
+            scope.fieldId = function(prependFormName, omitNumbers) {
+              if(scope.form.key){
+                var fieldKey = scope.form.key;
+                if(omitNumbers){
+                  fieldKey = fieldKey.filter(function(key){
+                    return !angular.isNumber(key);
+                  });
+                }
+                return ((prependFormName && formCtrl && formCtrl.$name)?formCtrl.$name+'-':'')+fieldKey.join('-');
+              }
+              return '';
+            };
+
+
             /**
              * DEPRECATED: use sf-messages instead.
              * Error message handler
@@ -174,6 +190,10 @@ angular.module('schemaForm').provider('schemaFormDecorators',
                 form.ngModelOptions = form.ngModelOptions || {};
                 scope.form  = form;
 
+                // append the field-id to the htmlClass
+                if(!scope.form.htmlClass){ scope.form.htmlClass = ''; }
+                scope.form.htmlClass += (scope.form.htmlClass?' ':'')+scope.fieldId(false, true);
+
                 //ok let's replace that template!
                 //We do this manually since we need to bind ng-model properly and also
                 //for fieldsets to recurse properly.
