Added ability to configure an object field in xosField
diff --git a/views/ngXosLib/karma.conf.js b/views/ngXosLib/karma.conf.js
index 9d880a0..18c6f6f 100644
--- a/views/ngXosLib/karma.conf.js
+++ b/views/ngXosLib/karma.conf.js
@@ -94,7 +94,7 @@
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: [
'PhantomJS',
- // 'Chrome'
+ 'Chrome'
],
diff --git a/views/ngXosLib/xosHelpers/spec/ui/field.test.js b/views/ngXosLib/xosHelpers/spec/ui/field.test.js
index b946f93..62a41a7 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/field.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/field.test.js
@@ -59,6 +59,18 @@
expect(errorFunctionWrapper).toThrow(new Error('[xosField] Please provide a field definition'));
}));
+ it('should throw an error if no field type is passed', inject(($compile, $rootScope) => {
+ function errorFunctionWrapper(){
+ // setup the parent scope
+ scope = $rootScope.$new();
+ scope.name = 'label';
+ scope.ngModel = 1;
+ scope.field = {label: 'Label:'}
+ compileElement();
+ }
+ expect(errorFunctionWrapper).toThrow(new Error('[xosField] Please provide a type in the field definition'));
+ }));
+
it('should throw an error if no field model is passed', inject(($compile, $rootScope) => {
function errorFunctionWrapper(){
// setup the parent scope
@@ -223,9 +235,36 @@
});
it('should not print the panel', () => {
- // console.log($(element).find('.panel.object-field'));
expect($(element).find('.panel.object-field')).not.toExist()
});
+
+ describe('but field is configured', () => {
+ beforeEach(() => {
+ scope.field.properties = {
+ foo: {
+ label: 'FooLabel:',
+ type: 'string',
+ validators: {
+ required: true
+ }
+ },
+ bar: {
+ type: 'number'
+ }
+ };
+ compileElement();
+ });
+ it('should render panel and configured fields', () => {
+ expect($(element).find('.panel.object-field')).toExist();
+ expect($(element).find('input[name="foo"]').parent().find('label').text()).toBe('FooLabel:');
+ expect($(element).find('input[name="foo"]')).toHaveAttr('type', 'string');
+ expect($(element).find('input[name="foo"]')).toHaveAttr('required');
+
+ expect($(element).find('input[name="bar"]').parent().find('label').text()).toBe('Bar:');
+ expect($(element).find('input[name="bar"]')).toHaveAttr('type', 'number');
+
+ });
+ });
});
});
});
diff --git a/views/ngXosLib/xosHelpers/src/services/helpers/ui/form.helpers.js b/views/ngXosLib/xosHelpers/src/services/helpers/ui/form.helpers.js
index 88cff60..c312e6d 100644
--- a/views/ngXosLib/xosHelpers/src/services/helpers/ui/form.helpers.js
+++ b/views/ngXosLib/xosHelpers/src/services/helpers/ui/form.helpers.js
@@ -91,7 +91,6 @@
this.buildFormStructure = (modelField, customField, model) => {
- // modelField = Object.keys(modelField).length > 0 ? modelField : customField; //if no model field are provided, check custom
modelField = angular.extend(modelField, customField);
customField = customField || {};
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
index ea9e0ab..c361008 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/field/field.component.js
@@ -103,19 +103,41 @@
return $window._;
})
.controller('SampleCtrl', function(){
- this.name = 'input-name';
- this.field = {label: 'My Object Value:', type: 'object'};
- this.model = {
+ this.name1 = 'input-name';
+ this.field1 = {label: 'My Object Field:', type: 'object'};
+ this.model1 = {
name: 'Jhon',
age: '25',
email: 'jhon@thewall.ru',
active: true
};
+
+ this.name2 = 'another-name';
+ this.field2 = {
+ label: 'Empty Object Field',
+ type: 'object',
+ properties: {
+ foo: {
+ label: 'FooLabel:',
+ type: 'string',
+ validators: {
+ required: true
+ }
+ },
+ bar: {
+ type: 'number'
+ }
+ }
+ }
});
</file>
<file name="index.html">
<div ng-controller="SampleCtrl as vm">
- <xos-field ng-model="vm.model" name="vm.name" field="vm.field"></xos-field>
+ <h4>Autogenerated object field</h4>
+ <xos-field ng-model="vm.model1" name="vm.name1" field="vm.field1"></xos-field>
+
+ <h4>Configured object field</h4>
+ <xos-field ng-model="vm.model2" name="vm.name2" field="vm.field2"></xos-field>
</div>
</file>
</example>
@@ -163,17 +185,28 @@
</span>
<div
class="panel panel-default object-field"
- ng-if="vm.field.type == 'object' && !vm.isEmptyObject(vm.ngModel)"
+ ng-if="vm.field.type == 'object' && (!vm.isEmptyObject(vm.ngModel) || !vm.isEmptyObject(vm.field.properties))"
>
<div class="panel-heading">{{vm.field.label}}</div>
<div class="panel-body">
- <div ng-repeat="(k, v) in vm.ngModel">
+ <div ng-if="!vm.field.properties" ng-repeat="(k, v) in vm.ngModel">
<xos-field
name="k"
field="{label: vm.formatLabel(k), type: vm.getType(v)}"
ng-model="v">
</xos-field>
</div>
+ <div ng-if="vm.field.properties" ng-repeat="(k, v) in vm.field.properties">
+ <xos-field
+ name="k"
+ field="{
+ label: v.label || vm.formatLabel(k),
+ type: v.type,
+ validators: v.validators
+ }"
+ ng-model="vm.ngModel[k]">
+ </xos-field>
+ </div>
</div>
</div>
`,
@@ -191,6 +224,9 @@
if(!this.field){
throw new Error('[xosField] Please provide a field definition');
}
+ if(!this.field.type){
+ throw new Error('[xosField] Please provide a type in the field definition');
+ }
if(!$attrs.ngModel){
throw new Error('[xosField] Please provide an ng-model');
}
@@ -198,7 +234,7 @@
this.getType = XosFormHelpers._getFieldFormat;
this.formatLabel = LabelFormatter.format;
- this.isEmptyObject = o => Object.keys(o).length === 0;
+ this.isEmptyObject = o => o ? Object.keys(o).length === 0 : true;
}
}
});
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js
index 9d68d56..2a9f00c 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form/form.component.js
@@ -208,9 +208,7 @@
let diff = _.difference(Object.keys(model), this.excludedField);
let modelField = XosFormHelpers.parseModelField(diff);
- console.log(modelField, this.config.fields, model);
this.formField = XosFormHelpers.buildFormStructure(modelField, this.config.fields, model);
- console.log(this.formField);
});
}