Added ability to configure an object field in xosField
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;
}
}
});