Skip to content

Field IDs Patch #496

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Field IDs Patch #496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e29b688
Merge branch 'hotfix/not-until-rendered'
davidlgj Sep 25, 2015
89f4ac8
fieldId()'s for names and ids
plong0 Sep 29, 2015
92d1b6c
missed Ctrl in post link
plong0 Sep 29, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions dist/bootstrap-decorator.js
View file
Open in desktop

Large diffs are not rendered by default.

53 changes: 48 additions & 5 deletions dist/schema-form.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand All @@ -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.
Expand Down Expand Up @@ -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) {
Expand All @@ -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) {
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/directives/decorators/bootstrap/checkbox.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/directives/decorators/bootstrap/checkboxes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
16 changes: 8 additions & 8 deletions src/directives/decorators/bootstrap/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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)}">
Expand All @@ -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"
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/directives/decorators/bootstrap/select.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
10 changes: 5 additions & 5 deletions src/directives/decorators/bootstrap/textarea.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
29 changes: 26 additions & 3 deletions src/directives/field.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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;
Expand Down Expand Up @@ -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
Expand Down
24 changes: 22 additions & 2 deletions src/services/decorators.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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
Expand All @@ -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.
Expand Down