Added select field to XOS components
diff --git a/views/ngXosLib/xosHelpers/spec/services/helpers/form.helpers.test.js b/views/ngXosLib/xosHelpers/spec/services/helpers/form.helpers.test.js
index f6bfbb2..29d812d 100644
--- a/views/ngXosLib/xosHelpers/spec/services/helpers/form.helpers.test.js
+++ b/views/ngXosLib/xosHelpers/spec/services/helpers/form.helpers.test.js
@@ -185,6 +185,12 @@
label: 'Custom Label',
type: 'number',
hint: 'Test Hint'
+ },
+ select:{
+ label: 'Select Label',
+ type: 'select',
+ hint: 'Select Hint',
+ options:{}
}
};
@@ -224,19 +230,27 @@
type: 'number',
validators: {},
hint: 'Test Hint'
+ },
+ select:{
+ label: 'Select Label:',
+ type: 'select',
+ hint: 'Select Hint',
+ validators: {},
+ options:{}
}
};
let empty_model = {5: 'Nan'}
it('should create a form object', () => {
- let res = service.buildFormStructure(empty_modelField, empty_customFields, empty_model)
+ let res = service.buildFormStructure(empty_modelField, empty_customFields, empty_model);
expect(res.id).toEqual(empty_formObject.id);
expect(res.name).toEqual(empty_formObject.name);
expect(res.mail).toEqual(empty_formObject.mail);
expect(res.active).toEqual(empty_formObject.active);
expect(res.created).toEqual(empty_formObject.created);
expect(res.custom).toEqual(empty_formObject.custom);
+ expect(res.select).toEqual(empty_formObject.select);
expect(res).toEqual(empty_formObject);
});
});
diff --git a/views/ngXosLib/xosHelpers/spec/ui/field.test.js b/views/ngXosLib/xosHelpers/spec/ui/field.test.js
index f933a01..e985cd6 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/field.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/field.test.js
@@ -92,6 +92,39 @@
});
});
+
+
+
+ describe('when a option is selected in dropdown', () => {
+ beforeEach(() => {
+ scope = rootScope.$new();
+ scope.name = 'label';
+ scope.field = {
+ label: 'Label',
+ type: 'select',
+ validators: {},
+ options:[{
+ id:0,
+ label:"---Site---"
+ },{
+ id:1,
+ label:"---Site1---"
+ }]
+ };
+ scope.ngModel = 'label';
+ compileElement();
+ });
+
+ it('No of select elements', () => {
+ expect($(element).find('select').children('option').length).toEqual(3);
+ });
+
+ it('should show a selected value', () => {
+ var elem = angular.element($(element).find('select').children('option')[1]);
+ expect(elem.text()).toEqual('---Site---');
+ });
+ });
+
describe('when a number input is passed', () => {
beforeEach(() => {
scope = rootScope.$new();
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 04a383a..2dabfe1 100644
--- a/views/ngXosLib/xosHelpers/src/services/helpers/ui/form.helpers.js
+++ b/views/ngXosLib/xosHelpers/src/services/helpers/ui/form.helpers.js
@@ -100,9 +100,12 @@
label: (customField[f] && customField[f].label) ? `${customField[f].label}:` : LabelFormatter.format(f),
type: (customField[f] && customField[f].type) ? customField[f].type : this._getFieldFormat(model[f]),
validators: (customField[f] && customField[f].validators) ? customField[f].validators : {},
- hint: (customField[f] && customField[f].hint)? customField[f].hint : ''
+ hint: (customField[f] && customField[f].hint)? customField[f].hint : '',
};
+ if(customField[f] && customField[f].options){
+ form[f].options = customField[f].options;
+ }
if(form[f].type === 'date'){
model[f] = new Date(model[f]);
}
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 20b7707..ea9e0ab 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
@@ -130,8 +130,10 @@
},
template: `
<label ng-if="vm.field.type !== 'object'">{{vm.field.label}}</label>
+ <!--<pre>{{vm.field.options | json}}</pre>-->
+ <!--<pre>{{vm.ngModel | json}}</pre>-->
<input
- ng-if="vm.field.type !== 'boolean' && vm.field.type !== 'object'"
+ ng-if="vm.field.type !== 'boolean' && vm.field.type !== 'object' && vm.field.type !== 'select'"
type="{{vm.field.type}}"
name="{{vm.name}}"
class="form-control"
@@ -139,6 +141,12 @@
ng-minlength="vm.field.validators.minlength || 0"
ng-maxlength="vm.field.validators.maxlength || 2000"
ng-required="vm.field.validators.required || false" />
+ <select class="form-control" ng-if ="vm.field.type === 'select'"
+ name = "{{vm.name}}"
+ ng-options="item.id as item.label for item in vm.field.options track by item.id"
+ ng-model="vm.ngModel"
+ ng-required="vm.field.validators.required || false">
+ </select>
<span class="boolean-field" ng-if="vm.field.type === 'boolean'">
<button
class="btn btn-success"
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 92843c2..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
@@ -164,7 +164,7 @@
<ng-form name="vm.{{vm.config.formName || 'form'}}">
<div class="form-group" ng-repeat="(name, field) in vm.formField">
<xos-field name="name" field="field" ng-model="vm.ngModel[name]"></xos-field>
- <xos-validation errors="vm[vm.config.formName || 'form'][name].$error"></xos-validation>
+ <xos-validation field="vm[vm.config.formName || 'form'][name]" form="vm[vm.config.formName || 'form']"></xos-validation>
</div>
<div class="form-group" ng-if="vm.config.actions">
<button role="button" href=""
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js
index e9ed574..37cfbd5 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation/validation.component.js
@@ -82,7 +82,7 @@
},
template: `
<div ng-cloak>
- <!--<pre>{{vm.field | json}}</pre>-->
+ <pre>{{vm.field | json}}</pre>
<!--<pre>{{vm.form.$submitted | json}}</pre>-->
<!--<pre>{{vm.field.$error.required !== false}}</pre>-->
<xos-alert config="vm.config" show="vm.field.$error.required !== undefined && vm.field.$error.required !== false && (vm.field.$touched || vm.form.$submitted)">