Validating form fields on the client
Change-Id: I33a0c2417d73d7974e4dc0c2f9f77f3984508606
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: '='
+ }
+};