From e6b3b6eae530a85137e93e5461f77eb1ba7aa833 Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Tue, 13 Sep 2016 16:26:59 +0100 Subject: [PATCH] #726 validation summary, min/max length validators --- .../widgets/core/form-field-validator.ts | 31 ++++++++++++++++++- .../widgets/core/form-field.model.ts | 7 +++-- .../multiline-text/multiline-text.widget.css | 16 ++++++++++ .../multiline-text/multiline-text.widget.html | 5 ++- .../widgets/number/number.widget.css | 2 +- .../components/widgets/text/text.widget.css | 17 ++++++++++ .../components/widgets/text/text.widget.html | 4 ++- 7 files changed, 76 insertions(+), 6 deletions(-) diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts index 625a259968..95ca5441ce 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field-validator.ts +++ b/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; } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts b/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts index 3e3ed036dc..1260454722 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/core/form-field.model.ts +++ b/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() ]; } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.css b/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.css index 944c90d860..006fdf8d96 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.css +++ b/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; +} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html index a79dd93ef9..30768fa88f 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/multiline-text/multiline-text.widget.html @@ -1,4 +1,5 @@ -
+
+ {{field.validationSummary}}
+ diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.css b/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.css index eef6cf2a3f..6249c666e8 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.css +++ b/ng2-components/ng2-activiti-form/src/components/widgets/number/number.widget.css @@ -1,3 +1,3 @@ -:host .number-widget { +.number-widget { width: 100%; } diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.css b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.css index 08b71d5a19..1c70629adf 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.css +++ b/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; +} diff --git a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html index 67e0a654ce..95a46c3c44 100644 --- a/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html +++ b/ng2-components/ng2-activiti-form/src/components/widgets/text/text.widget.html @@ -1,4 +1,5 @@ -
+
+ {{field.validationSummary}}