#726 validation summary, min/max length validators

ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts

@@ -86,7 +86,36 @@ export class MinLengthFieldValidator implements FormFieldValidator {
 
     validate(field: FormFieldModel): boolean {
         if (this.isSupported(field)) {
-            return field.value.length >= field.minLength;
+            let result = field.value.length >= field.minLength;
+            if (!result) {
+                field.validationSummary = `Should be at least ${field.minLength} characters long.`;
+            }
+            return result;
+        }
+        return true;
+    }
+}
+
+export class MaxLengthFieldValidator implements FormFieldValidator {
+
+    private supportedTypes = [
+        FormFieldTypes.TEXT,
+        FormFieldTypes.MULTILINE_TEXT
+    ];
+
+    isSupported(field: FormFieldModel): boolean {
+        return field &&
+            field.maxLength > 0 &&
+            this.supportedTypes.indexOf(field.type) > -1;
+    }
+
+    validate(field: FormFieldModel): boolean {
+        if (this.isSupported(field)) {
+            let result = field.value.length <= field.maxLength;
+            if (!result) {
+                field.validationSummary = `Should be ${field.maxLength} characters maximum.`;
+            }
+            return result;
         }
         return true;
     }

ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts

@@ -25,7 +25,8 @@ import {
     FormFieldValidator,
     RequiredFieldValidator,
     NumberFieldValidator,
-    MinLengthFieldValidator
+    MinLengthFieldValidator,
+    MaxLengthFieldValidator
 } from './form-field-validator';
 
 
@@ -62,6 +63,7 @@ export class FormFieldModel extends FormWidgetModel {
     isVisible: boolean = true;
     visibilityCondition: WidgetVisibilityModel = null;
 
+    validationSummary: string;
     validators: FormFieldValidator[] = [];
 
     get value(): any {
@@ -138,7 +140,8 @@ export class FormFieldModel extends FormWidgetModel {
         this.validators = [
             new RequiredFieldValidator(),
             new NumberFieldValidator(),
-            new MinLengthFieldValidator()
+            new MinLengthFieldValidator(),
+            new MaxLengthFieldValidator()
         ];
     }
 

ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.css

@@ -1,3 +1,19 @@
 .multiline-text-widget {
     width: 100%;
 }
+
+.multiline-text-widget__invalid .mdl-textfield__input {
+    border-color: #d50000;
+}
+
+.multiline-text-widget__invalid .mdl-textfield__label {
+    color: #d50000;
+}
+
+.multiline-text-widget__invalid .mdl-textfield__label:after {
+    background-color: #d50000;
+}
+
+.multiline-text-widget__invalid .mdl-textfield__error {
+    visibility: visible !important;
+}

ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html

@@ -1,4 +1,5 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label multiline-text-widget">
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label multiline-text-widget"
+     [class.multiline-text-widget__invalid]="!field.isValid">
     <textarea class="mdl-textfield__input"
               type="text"
               rows= "3"
@@ -9,4 +10,6 @@
               [disabled]="field.readOnly">
     </textarea>
     <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+    <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
 </div>
+

ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.css

@@ -1,3 +1,3 @@
-:host .number-widget {
+.number-widget {
     width: 100%;
 }

ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.css

@@ -1,3 +1,20 @@
 .text-widget {
     width: 100%;
 }
+
+
+.text-widget__invalid .mdl-textfield__input {
+    border-color: #d50000;
+}
+
+.text-widget__invalid .mdl-textfield__label {
+    color: #d50000;
+}
+
+.text-widget__invalid .mdl-textfield__label:after {
+    background-color: #d50000;
+}
+
+.text-widget__invalid .mdl-textfield__error {
+    visibility: visible !important;
+}

ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html

@@ -1,4 +1,5 @@
-<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label text-widget">
+<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label text-widget"
+     [class.text-widget__invalid]="!field.isValid">
     <input class="mdl-textfield__input"
            type="text"
            [attr.id]="field.id"
@@ -7,4 +8,5 @@
            (ngModelChange)="checkVisibility(field)"
            [disabled]="field.readOnly">
     <label class="mdl-textfield__label" [attr.for]="field.id">{{field.name}}</label>
+    <span *ngIf="field.validationSummary" class="mdl-textfield__error">{{field.validationSummary}}</span>
 </div>