Simplified form
Change-Id: Ib4b17823be86e18bd5e83679cde7fc95a4f8bac1
diff --git a/src/app/core/form/form-helpers.ts b/src/app/core/form/form-helpers.ts
index 0677cbd..d2d7373 100644
--- a/src/app/core/form/form-helpers.ts
+++ b/src/app/core/form/form-helpers.ts
@@ -1,10 +1,11 @@
-import * as _ from 'lodash';
import {IXosConfigHelpersService} from '../services/helpers/config.helpers';
+import {IXosFormInput} from './form';
export interface IXosFormHelpersService {
_getFieldFormat(value: any): string;
parseModelField(fields: any): any[];
buildFormStructure(modelField: any[], customField: any[], model: any, order: string[]): any;
+ buildFormData(fields: IXosFormInput[], model: any): any;
}
export class XosFormHelpers {
@@ -54,53 +55,5 @@
return typeof value;
};
-
- public buildFormStructure = (modelField, customField, model, order) => {
- // TODO take an array as input
- // NOTE do we want to support auto-generated forms??
- // We can take that out of this component and autogenerate the config somewhere else
- const orderedForm = {};
-
- modelField = angular.extend(modelField, customField);
- customField = customField || {};
-
- if (order) {
- _.each(order, function (key: string) {
- orderedForm[key] = {};
- });
- }
-
- _.each(Object.keys(modelField), (f) => {
-
- orderedForm[f] = {
- label: (customField[f] && customField[f].label) ? `${customField[f].label}:` : this.ConfigHelpers.toLabel(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 : '',
- };
-
- if (customField[f] && customField[f].options) {
- orderedForm[f].options = customField[f].options;
- }
- if (customField[f] && customField[f].properties) {
- orderedForm[f].properties = customField[f].properties;
- }
- if (orderedForm[f].type === 'date') {
- model[f] = new Date(model[f]);
- }
-
- if (orderedForm[f].type === 'number') {
- model[f] = parseInt(model[f], 10);
- }
- });
-
- return orderedForm;
- };
-
- public parseModelField = (fields) => {
- return _.reduce(fields, (form, f) => {
- form[f] = {};
- return form;
- }, {});
}
-}
+
diff --git a/src/app/core/form/form.html b/src/app/core/form/form.html
index a583269..2172d3a 100644
--- a/src/app/core/form/form.html
+++ b/src/app/core/form/form.html
@@ -1,8 +1,11 @@
<form name="vm.{{vm.config.formName || 'form'}}" novalidate>
- <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 field="vm[vm.config.formName || 'form'][name]" form = "vm[vm.config.formName || 'form']"></xos-validation>
- <div class="alert alert-info" ng-show="(field.hint).length >0" role="alert">{{field.hint}}</div>
+ <!--<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 field="vm[vm.config.formName || 'form'][name]" form = "vm[vm.config.formName || 'form']"></xos-validation>-->
+ <!--<div class="alert alert-info" ng-show="(field.hint).length >0" role="alert">{{field.hint}}</div>-->
+ <!--</div>-->
+ <div class="form-group" ng-repeat="field in vm.config.inputs">
+ <xos-field name="field.name" field="field" ng-model="vm.ngModel[field.name]"></xos-field>
</div>
<div class="form-group" ng-if="vm.config.actions">
<!--<xos-alert config="vm.config.feedback" show="vm.config.feedback.show">{{vm.config.feedback.message}}</xos-alert>-->
@@ -15,4 +18,4 @@
{{action.label}}
</button>
</div>
-</form>
\ No newline at end of file
+</form>
diff --git a/src/app/core/form/form.ts b/src/app/core/form/form.ts
index a5cfa67..6713fe7 100644
--- a/src/app/core/form/form.ts
+++ b/src/app/core/form/form.ts
@@ -4,6 +4,45 @@
import {IXosFormHelpersService} from './form-helpers';
import {IXosConfigHelpersService} from '../services/helpers/config.helpers';
+export interface IXosFormAction {
+ label: string;
+ icon: string;
+ class: string;
+ cb(item: any, form: any): void;
+}
+
+export interface IXosFeedback {
+ show: boolean;
+ message: string;
+ type: string; // NOTE is possible to enumerate success, error, warning, info?
+}
+
+export interface IXosFormInputValidator {
+ minlength?: number;
+ maxlength?: number;
+ required?: boolean;
+ min?: number;
+ max?: number;
+ custom?(value: any): any;
+ // do your validation here and return true | false
+ // alternatively you can return an array [errorName, true|false]
+}
+
+export interface IXosFormInput {
+ name: string;
+ label: string;
+ type: string; // options are: [date, boolean, number, email, string, select],
+ validators: IXosFormInputValidator;
+}
+
+export interface IXosFormConfig {
+ exclude?: string[];
+ actions: IXosFormAction[];
+ feedback?: IXosFeedback;
+ inputs: IXosFormInput[];
+ formName: string;
+}
+
class FormCtrl {
$inject = ['$onInit', '$scope', 'XosFormHelpers', 'ConfigHelpers'];
@@ -17,7 +56,6 @@
private XosFormHelpers: IXosFormHelpersService,
private ConfigHelpers: IXosConfigHelpersService
) {
-
}
$onInit() {
@@ -29,6 +67,11 @@
throw new Error('[xosForm] Please provide an action list in the configuration');
}
+ if (!this.config.formName) {
+ throw new Error('[xosForm] Please provide a formName property in the config');
+ }
+
+ // NOTE is needed ??
if (!this.config.feedback) {
this.config.feedback = {
show: false,
@@ -37,36 +80,8 @@
};
}
- // TODO Define this list in a service (eg: ConfigHelper)
- this.excludedField = this.ConfigHelpers.excluded_fields;
- if (this.config && this.config.exclude) {
- this.excludedField = this.excludedField.concat(this.config.exclude);
- }
-
- this.formField = [];
-
- this.$scope.$watch(() => this.config, () => {
- if (!this.ngModel) {
- return;
- }
- let diff = _.difference(Object.keys(this.ngModel), this.excludedField);
- let modelField = this.XosFormHelpers.parseModelField(diff);
- this.formField = this.XosFormHelpers.buildFormStructure(modelField, this.config.fields, this.ngModel, this.config.order);
- }, true);
-
- this.$scope.$watch(() => this.ngModel, (model) => {
- console.log(this.ngModel);
- // empty from old stuff
- this.formField = {};
- if (!model) {
- return;
- }
- let diff = _.difference(Object.keys(model), this.excludedField);
- let modelField = this.XosFormHelpers.parseModelField(diff);
- this.formField = this.XosFormHelpers.buildFormStructure(modelField, this.config.fields, model, this.config.order);
- console.log(this.formField);
- });
-
+ // remove excluded inputs
+ _.remove(this.config.inputs, i => this.config.exclude.indexOf(i.name) > -1);
}
}