Validating form fields on the client
Change-Id: I33a0c2417d73d7974e4dc0c2f9f77f3984508606
diff --git a/src/app/core/alert/alert.ts b/src/app/core/alert/alert.ts
index 6c64015..037abb1 100644
--- a/src/app/core/alert/alert.ts
+++ b/src/app/core/alert/alert.ts
@@ -8,7 +8,7 @@
static $inject = ['$timeout'];
- public config: any;
+ public config: IXosAlertConfig;
public show: boolean;
public dismiss: () => void;
@@ -30,7 +30,6 @@
this.show = false;
};
- console.log(this.config);
if (this.config.autoHide) {
let to = this.$timeout(() => {
diff --git a/src/app/core/form/form.html b/src/app/core/form/form.html
index 9afd949..4c7485a 100644
--- a/src/app/core/form/form.html
+++ b/src/app/core/form/form.html
@@ -6,7 +6,7 @@
<!--</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>
- <!--<xos-validation field="vm[vm.config.formName || 'form'][name]" form = "vm[vm.config.formName || 'form']"></xos-validation>-->
+ <xos-validation field="vm[vm.config.formName || 'form'][field.name]" form="vm[vm.config.formName || 'form']"></xos-validation>
<p ng-show="(field.hint).length >0" role="alert">{{field.hint}}</p>
</div>
<div class="form-group" ng-if="vm.config.actions">
diff --git a/src/app/core/header/header.html b/src/app/core/header/header.html
index 3a277e0..5025258 100644
--- a/src/app/core/header/header.html
+++ b/src/app/core/header/header.html
@@ -37,7 +37,7 @@
<input
type="text"
class="form-control"
- placeholder="Search core models"
+ placeholder="Navigate routes (press 'f' to select)"
style="width: 275px"
ng-model="vm.query"
uib-typeahead="state.label for state in vm.states | filter:$viewValue | limitTo:8"
diff --git a/src/app/core/header/header.ts b/src/app/core/header/header.ts
index a7cba72..92d402d 100644
--- a/src/app/core/header/header.ts
+++ b/src/app/core/header/header.ts
@@ -71,6 +71,7 @@
// redirect to selected page
this.routeSelected = (item: IXosNavigationRoute) => {
+ console.log(`go to: ${item.state}`);
this.$state.go(item.state);
this.query = null;
};
diff --git a/src/app/core/index.ts b/src/app/core/index.ts
index 17536f6..53dfade 100644
--- a/src/app/core/index.ts
+++ b/src/app/core/index.ts
@@ -14,6 +14,7 @@
import {xosField} from './field/field';
import 'angular-toastr';
import {xosAlert} from './alert/alert';
+import {xosValidation} from './validation/validation';
export const xosCore = 'xosCore';
@@ -37,4 +38,5 @@
.component('xosTable', xosTable)
.component('xosForm', xosForm)
.component('xosField', xosField)
- .component('xosAlert', xosAlert);
+ .component('xosAlert', xosAlert)
+ .component('xosValidation', xosValidation);
diff --git a/src/app/core/services/helpers/config.helpers.ts b/src/app/core/services/helpers/config.helpers.ts
index 75c7de1..e4c10b6 100644
--- a/src/app/core/services/helpers/config.helpers.ts
+++ b/src/app/core/services/helpers/config.helpers.ts
@@ -216,7 +216,7 @@
type: 'danger',
closeBtn: true
};
- console.log(formCfg);
+
return;
}
@@ -234,6 +234,12 @@
// TODO understand why 405 does not go directly in catch (it may be realted to ng-rest-gw)
throw new Error();
}
+ formCfg.feedback = {
+ show: true,
+ message: `${model.name} succesfully saved`,
+ type: 'success',
+ closeBtn: true
+ };
this.toastr.success(`${model.name} succesfully saved`);
})
.catch(err => {
diff --git a/src/app/core/validation/validation.html b/src/app/core/validation/validation.html
new file mode 100644
index 0000000..2526412
--- /dev/null
+++ b/src/app/core/validation/validation.html
@@ -0,0 +1,18 @@
+<!--<pre>{{vm.field | json}}</pre>-->
+<div ng-cloak>
+ <xos-alert config="vm.config" show="vm.field.$error.required !== undefined && vm.field.$error.required !== false && (vm.field.$touched || vm.form.$submitted)">
+ Field required
+ </xos-alert>
+ <xos-alert config="vm.config" show="vm.field.$error.email !== undefined && vm.field.$error.email !== false && (vm.field.$touched || vm.form.$submitted)">
+ This is not a valid email
+ </xos-alert>
+ <xos-alert config="vm.config" show="vm.field.$error.minlength !== undefined && vm.field.$error.minlength !== false && (vm.field.$touched || vm.form.$submitted)">
+ Too short
+ </xos-alert>
+ <xos-alert config="vm.config" show="vm.field.$error.maxlength !== undefined && vm.field.$error.maxlength !== false && (vm.field.$touched || vm.form.$submitted)">
+ Too long
+ </xos-alert>
+ <xos-alert config="vm.config" show="vm.field.$error.custom !== undefined && vm.field.$error.custom !== false && (vm.field.$touched || vm.form.$submitted)">
+ Field invalid
+ </xos-alert>
+</div>
\ No newline at end of file
diff --git a/src/app/core/validation/validation.scss b/src/app/core/validation/validation.scss
new file mode 100644
index 0000000..fea42c3
--- /dev/null
+++ b/src/app/core/validation/validation.scss
@@ -0,0 +1,7 @@
+xos-validation {
+ display: block;
+}
+
+xos-field + xos-validation {
+ margin-top: 10px;
+}
\ No newline at end of file
diff --git a/src/app/core/validation/validation.ts b/src/app/core/validation/validation.ts
new file mode 100644
index 0000000..7481b3b
--- /dev/null
+++ b/src/app/core/validation/validation.ts
@@ -0,0 +1,26 @@
+import './validation.scss';
+
+class ValidationCtrl {
+
+ static $inject = [];
+
+ public config: any;
+
+ $onInit() {
+ console.log('validation');
+ this.config = {
+ type: 'danger'
+ };
+ }
+}
+
+export const xosValidation: angular.IComponentOptions = {
+ template: require('./validation.html'),
+ controllerAs: 'vm',
+ controller: ValidationCtrl,
+ transclude: true,
+ bindings: {
+ field: '=',
+ form: '='
+ }
+};