+ name="{{fieldId()}}"
+ aria-describedby="{{fieldId(true) + 'Status'}}">
@@ -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'}}">
{{ hasSuccess() ? '(success)' : '(error)' }}
diff --git a/src/directives/decorators/bootstrap/select.html b/src/directives/decorators/bootstrap/select.html
index b4b3296e0..dd02bb42c 100644
--- 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()}}">
diff --git a/src/directives/decorators/bootstrap/textarea.html b/src/directives/decorators/bootstrap/textarea.html
index 06364edfc..ed7ec02f7 100644
--- a/src/directives/decorators/bootstrap/textarea.html
+++ b/src/directives/decorators/bootstrap/textarea.html
@@ -1,16 +1,16 @@
-
+
+ name="{{fieldId()}}">
@@ -18,14 +18,14 @@
class="input-group-addon"
ng-bind-html="form.fieldAddonLeft">
+ name="{{fieldId()}}">
diff --git a/src/directives/field.js b/src/directives/field.js
index 556f30c59..b56efbc68 100644
--- 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) {
@@ -23,7 +26,10 @@ 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;
@@ -154,6 +160,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
index bd13a94fc..6cc99d949 100644
--- 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.