TSK-1315: Added inputLengthValidation to Workplace/Task

web/src/app/administration/components/classification-details/classification-details.component.ts

@@ -86,11 +86,11 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
         this.store.dispatch(new SelectClassification(this.classification.classificationId));
       });
 
-    this.formsValidatorService.inputOverflowObservable.subscribe((inputOverflowMap) => {
+    this.formsValidatorService.inputOverflowObservable.pipe(takeUntil(this.destroy$)).subscribe((inputOverflowMap) => {
       this.inputOverflowMap = inputOverflowMap;
     });
     this.validateKeypress = (inputFieldModel, maxLength) => {
-      this.formsValidatorService.validateKeypress(inputFieldModel, maxLength);
+      this.formsValidatorService.validateInputOverflow(inputFieldModel, maxLength);
     };
   }
 

web/src/app/administration/components/workbasket-information/workbasket-information.component.ts

@@ -85,11 +85,11 @@ export class WorkbasketInformationComponent implements OnInit, OnChanges, OnDest
         this.lookupField = workbasketsCustomization.information.owner.lookupField;
       }
     });
-    this.formsValidatorService.inputOverflowObservable.subscribe((inputOverflowMap) => {
+    this.formsValidatorService.inputOverflowObservable.pipe(takeUntil(this.destroy$)).subscribe((inputOverflowMap) => {
       this.inputOverflowMap = inputOverflowMap;
     });
     this.validateKeypress = (inputFieldModel, maxLength) => {
-      this.formsValidatorService.validateKeypress(inputFieldModel, maxLength);
+      this.formsValidatorService.validateInputOverflow(inputFieldModel, maxLength);
     };
   }
 

web/src/app/shared/services/forms-validator/forms-validator.service.ts

@@ -109,7 +109,7 @@ export class FormsValidatorService {
     );
   }
 
-  validateKeypress(inputFieldModel: NgModel, maxLength: Number): void {
+  validateInputOverflow(inputFieldModel: NgModel, maxLength: Number): void {
     if (this.overflowErrorSubscriptionMap.has(inputFieldModel.name)) {
       this.overflowErrorSubscriptionMap.get(inputFieldModel.name).unsubscribe();
     }

web/src/app/workplace/components/taskdetails-attribute/attribute.component.html

@@ -27,4 +27,4 @@
     <span class="material-icons md-20 green-blue">add</span>
     <span>Add new {{ callbackInfo ? 'callback information' : 'custom attribute'}}</span>
   </button>
-</ng-container>
+</ng-container>

web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.html

@@ -3,100 +3,116 @@
     <div class="form-group">
       <label for="task-custom1" class="control-label">Custom1</label>
       <input type="text" class="form-control" id="task-custom1" placeholder="Custom1"
-             [(ngModel)]="task.custom1"
+             [(ngModel)]="task.custom1" name="task.custom1" maxlength="255" #custom1
-             name="task.custom1">
+             (keypress)="validateKeypress(custom1, 255)">
+      <div *ngIf="inputOverflowMap.get(custom1.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom2" class="control-label">Custom2</label>
       <input type="text" class="form-control" id="task-custom2" placeholder="Custom2"
-             [(ngModel)]="task.custom2"
+             [(ngModel)]="task.custom2" name="task.custom2" maxlength="255" #custom2
-             name="task.custom2">
+                 (keypress)="validateKeypress(custom2, 255)">
+          <div *ngIf="inputOverflowMap.get(custom2.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom3" class="control-label">Custom3</label>
       <input type="text" class="form-control" id="task-custom3" placeholder="Custom3"
-             [(ngModel)]="task.custom3"
+             [(ngModel)]="task.custom3" name="task.custom3" maxlength="255" #custom3
-             name="task.custom3">
+                 (keypress)="validateKeypress(custom3, 255)">
+          <div *ngIf="inputOverflowMap.get(custom3.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom4" class="control-label">Custom4</label>
       <input type="text" class="form-control" id="task-custom4" placeholder="Custom4"
-             [(ngModel)]="task.custom4"
+             [(ngModel)]="task.custom4" name="task.custom4" maxlength="255" #custom4
-             name="task.custom4">
+                 (keypress)="validateKeypress(custom4, 255)">
+          <div *ngIf="inputOverflowMap.get(custom4.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom5" class="control-label">Custom5</label>
       <input type="text" class="form-control" id="task-custom5" placeholder="Custom5"
-             [(ngModel)]="task.custom5"
+             [(ngModel)]="task.custom5" name="task.custom5" maxlength="255" #custom5
-             name="task.custom5">
+                 (keypress)="validateKeypress(custom5, 255)">
+          <div *ngIf="inputOverflowMap.get(custom5.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom6" class="control-label">Custom6</label>
       <input type="text" class="form-control" id="task-custom6" placeholder="Custom6"
-             [(ngModel)]="task.custom6"
+             [(ngModel)]="task.custom6" name="task.custom6" maxlength="255" #custom6
-             name="task.custom6">
+                 (keypress)="validateKeypress(custom6, 255)">
+          <div *ngIf="inputOverflowMap.get(custom6.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom7" class="control-label">Custom7</label>
       <input type="text" class="form-control" id="task-custom7" placeholder="Custom7"
-             [(ngModel)]="task.custom7"
+             [(ngModel)]="task.custom7" name="task.custom7" maxlength="255" #custom7
-             name="task.custom7">
+                 (keypress)="validateKeypress(custom7, 255)">
+          <div *ngIf="inputOverflowMap.get(custom7.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom8" class="control-label">Custom8</label>
       <input type="text" class="form-control" id="task-custom8" placeholder="Custom8"
-             [(ngModel)]="task.custom8"
+             [(ngModel)]="task.custom8" name="task.custom8" maxlength="255" #custom8
-             name="task.custom8">
+                 (keypress)="validateKeypress(custom8, 255)">
+          <div *ngIf="inputOverflowMap.get(custom8.name)" class="error">{{lengthError}}</div>
     </div>
   </div>
   <div class="col-md-6">
     <div class="form-group">
       <label for="task-custom9" class="control-label">Custom9</label>
       <input type="text" class="form-control" id="task-custom9" placeholder="Custom9"
-             [(ngModel)]="task.custom9"
+             [(ngModel)]="task.custom9" name="task.custom9" maxlength="255" #custom9
-             name="task.custom9">
+                 (keypress)="validateKeypress(custom9, 255)">
+          <div *ngIf="inputOverflowMap.get(custom9.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom10" class="control-label">Custom10</label>
       <input type="text" class="form-control" id="task-custom10" placeholder="Custom10"
-             [(ngModel)]="task.custom10"
+             [(ngModel)]="task.custom10" name="task.custom10" maxlength="255" #custom10
-             name="task.custom10">
+                 (keypress)="validateKeypress(custom10, 255)">
+          <div *ngIf="inputOverflowMap.get(custom10.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom11" class="control-label">Custom11</label>
       <input type="text" class="form-control" id="task-custom11" placeholder="Custom11"
-             [(ngModel)]="task.custom11"
+             [(ngModel)]="task.custom11" name="task.custom11" maxlength="255" #custom11
-             name="task.custom11">
+                 (keypress)="validateKeypress(custom11, 255)">
+          <div *ngIf="inputOverflowMap.get(custom11.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom12" class="control-label">Custom12</label>
       <input type="text" class="form-control" id="task-custom12" placeholder="Custom12"
-             [(ngModel)]="task.custom12"
+             [(ngModel)]="task.custom12" name="task.custom12" maxlength="255" #custom12
-             name="task.custom12">
+                 (keypress)="validateKeypress(custom12, 255)">
+          <div *ngIf="inputOverflowMap.get(custom12.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom13" class="control-label">Custom13</label>
       <input type="text" class="form-control" id="task-custom13" placeholder="Custom13"
-             [(ngModel)]="task.custom13"
+             [(ngModel)]="task.custom13" name="task.custom13" maxlength="255" #custom13
-             name="task.custom13">
+                 (keypress)="validateKeypress(custom13, 255)">
+          <div *ngIf="inputOverflowMap.get(custom13.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom14" class="control-label">Custom14</label>
       <input type="text" class="form-control" id="task-custom14" placeholder="Custom14"
-             [(ngModel)]="task.custom14"
+             [(ngModel)]="task.custom14" name="task.custom14" maxlength="255" #custom14
-             name="task.custom14">
+                 (keypress)="validateKeypress(custom14, 255)">
+          <div *ngIf="inputOverflowMap.get(custom14.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom15" class="control-label">Custom15</label>
       <input type="text" class="form-control" id="task-custom15" placeholder="Custom15"
-             [(ngModel)]="task.custom15"
+             [(ngModel)]="task.custom15" name="task.custom15" maxlength="255" #custom15
-             name="task.custom15">
+                 (keypress)="validateKeypress(custom15, 255)">
+          <div *ngIf="inputOverflowMap.get(custom15.name)" class="error">{{lengthError}}</div>
     </div>
     <div class="form-group">
       <label for="task-custom16" class="control-label">Custom16</label>
       <input type="text" class="form-control" id="task-custom16" placeholder="Custom16"
-             [(ngModel)]="task.custom16"
+             [(ngModel)]="task.custom16" name="task.custom16" maxlength="255" #custom16
-             name="task.custom16">
+                 (keypress)="validateKeypress(custom16, 255)">
+          <div *ngIf="inputOverflowMap.get(custom16.name)" class="error">{{lengthError}}</div>
     </div>
   </div>
 </ng-container>

web/src/app/workplace/components/taskdetails-custom-fields/custom-fields.component.ts

@@ -1,13 +1,36 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { Task } from 'app/workplace/models/task';
+import { takeUntil } from 'rxjs/operators';
+import { FormsValidatorService } from '../../../shared/services/forms-validator/forms-validator.service';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'taskana-task-details-custom-fields',
   templateUrl: './custom-fields.component.html'
 })
-export class TaskdetailsCustomFieldsComponent implements OnInit {
+export class TaskdetailsCustomFieldsComponent implements OnInit, OnDestroy {
   @Input() task: Task;
   @Output() taskChange: EventEmitter<Task> = new EventEmitter<Task>();
 
-  ngOnInit() {}
+  readonly lengthError = 'You have reached the maximum length';
+  inputOverflowMap = new Map<string, boolean>();
+  validateKeypress: Function;
+
+  destroy$ = new Subject<void>();
+
+  constructor(private formsValidatorService: FormsValidatorService) {}
+
+  ngOnInit() {
+    this.formsValidatorService.inputOverflowObservable.pipe(takeUntil(this.destroy$)).subscribe((inputOverflowMap) => {
+      this.inputOverflowMap = inputOverflowMap;
+    });
+    this.validateKeypress = (inputFieldModel, maxLength) => {
+      this.formsValidatorService.validateInputOverflow(inputFieldModel, maxLength);
+    };
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }

web/src/app/workplace/components/taskdetails-general/general-fields.component.html

@@ -4,16 +4,23 @@
       <div class="row">
         <div class="form-group col-xs-6 required">
           <label for="task-name" class="control-label">Name</label>
-          <input type="text" class="form-control" id="task-name" placeholder="Name" [(ngModel)]="task.name" name="task.name">
+          <input type="text" class="form-control" id="task-name" placeholder="Name" [(ngModel)]="task.name"
-          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.name')" [validationTrigger]="this.toogleValidationMap.get('task.name')"
+                 name="task.name" maxlength="255" #name (keypress)="validateKeypress(name, 255)">
+          <div *ngIf="inputOverflowMap.get(name.name)" class="error">{{lengthError}}</div>
+          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.name')"
+                                              [validationTrigger]="this.toggleValidationMap.get('task.name')"
                                               errorMessage="* Name is required">
           </taskana-shared-field-error-display>
         </div>
         <div class="form-group col-xs-6 required">
           <label for="task.primaryObjRef.company" class="control-label">Company</label>
-          <input type="text" class="form-control" id="task.primaryObjRef.company" required placeholder="Company description"
+          <input type="text" class="form-control" id="task.primaryObjRef.company" required
-            [(ngModel)]="task.primaryObjRef.company" name="task.primaryObjRef.company">
+                 placeholder="Company description"
-          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.company')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.company')"
+                 [(ngModel)]="task.primaryObjRef.company" name="task.primaryObjRef.company" maxlength="32" #company
+                 (keypress)="validateKeypress(company, 32)">
+          <div *ngIf="inputOverflowMap.get(company.name)" class="error">{{lengthError}}</div>
+          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.company')"
+                                              [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.company')"
                                               errorMessage="* Company is required">
           </taskana-shared-field-error-display>
         </div>
@@ -22,18 +29,26 @@
       <div class="row">
         <div class="form-group col-xs-6 required">
           <label for="task.primaryObjRef.system" class="control-label">System</label>
-          <input type="text" class="form-control" id="task.primaryObjRef.system" required placeholder="System description"
+          <input type="text" class="form-control" id="task.primaryObjRef.system" required
-            [(ngModel)]="task.primaryObjRef.system" name="task.primaryObjRef.system">
+                 placeholder="System description"
-          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.system')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.system')"
+                 [(ngModel)]="task.primaryObjRef.system" name="task.primaryObjRef.system" maxlength="32" #system
+                 (keypress)="validateKeypress(system, 32)">
+          <div *ngIf="inputOverflowMap.get(system.name)" class="error">{{lengthError}}</div>
+          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.system')"
+                                              [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.system')"
                                               errorMessage="* System is required">
           </taskana-shared-field-error-display>
         </div>
         <div class="form-group col-xs-6 required">
           <label for="task.primaryObjRef.systemInstance" class="control-label">System instance</label>
-          <input type="text" class="form-control" id="task.primaryObjRef.systemInstance" required placeholder="System Instance description"
+          <input type="text" class="form-control" id="task.primaryObjRef.systemInstance" required
-            [(ngModel)]="task.primaryObjRef.systemInstance" name="task.primaryObjRef.systemInstance">
+                 placeholder="System Instance description"
+                 [(ngModel)]="task.primaryObjRef.systemInstance" name="task.primaryObjRef.systemInstance" maxlength="32"
+                 #instance (keypress)="validateKeypress(instance, 32)">
+          <div *ngIf="inputOverflowMap.get(instance.name)" class="error">{{lengthError}}</div>
           <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.systemInstance')"
-                                              [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.systemInstance')" errorMessage="* System instance is required">
+                                              [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.systemInstance')"
+                                              errorMessage="* System instance is required">
           </taskana-shared-field-error-display>
         </div>
       </div>
@@ -41,16 +56,22 @@
         <div class="form-group col-xs-6 required">
           <label for="task.primaryObjRef.type" class="control-label">Reference type</label>
           <input type="text" class="form-control" id="task.primaryObjRef.type" required placeholder="Reference type"
-            [(ngModel)]="task.primaryObjRef.type" name="task.primaryObjRef.type">
+                 [(ngModel)]="task.primaryObjRef.type" name="task.primaryObjRef.type" maxlength="32" #type
-          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.type')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.type')"
+                 (keypress)="validateKeypress(type, 32)">
+          <div *ngIf="inputOverflowMap.get(type.name)" class="error">{{lengthError}}</div>
+          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.type')"
+                                              [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.type')"
                                               errorMessage="* Reference type is required">
           </taskana-shared-field-error-display>
         </div>
         <div class="form-group col-xs-6 required">
           <label for="task.primaryObjRef.value" class="control-label">Reference value</label>
           <input type="text" class="form-control" id="task.primaryObjRef.value" required placeholder="Reference value"
-            [(ngModel)]="task.primaryObjRef.value" name="task.primaryObjRef.value">
+                 [(ngModel)]="task.primaryObjRef.value" name="task.primaryObjRef.value" maxlength="32" #value
-          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.value')" [validationTrigger]="this.toogleValidationMap.get('task.primaryObjRef.value')"
+                 (keypress)="validateKeypress(value, 32)">
+          <div *ngIf="inputOverflowMap.get(value.name)" class="error">{{lengthError}}</div>
+          <taskana-shared-field-error-display [displayError]="!isFieldValid('task.primaryObjRef.value')"
+                                              [validationTrigger]="this.toggleValidationMap.get('task.primaryObjRef.value')"
                                               errorMessage="* Reference value is required">
           </taskana-shared-field-error-display>
         </div>
@@ -58,15 +79,19 @@
       <div class="row">
         <div class="form-group col-xs-6 required">
           <label for="classification" class="control-label">Classification</label>
-          <taskana-shared-dropdown [list]="classifications" (performClassification)="changedClassification($event)" [itemSelected]="task?.classificationSummary" id="classification"></taskana-shared-dropdown>
+          <taskana-shared-dropdown [list]="classifications" (performClassification)="changedClassification($event)"
+                                   [itemSelected]="task?.classificationSummary"
+                                   id="classification"></taskana-shared-dropdown>
         </div>
         <div class="form-group col-xs-4">
           <label for="task-due" class="control-label">Due date</label>
-          <taskana-shared-date-picker placeholder="Due date" [value]="task.due" [name]="'task.due'" [id]="'task-due'" (dateOutput)="updateDate($event)"></taskana-shared-date-picker>
+          <taskana-shared-date-picker placeholder="Due date" [value]="task.due" [name]="'task.due'" [id]="'task-due'"
+                                      (dateOutput)="updateDate($event)"></taskana-shared-date-picker>
         </div>
         <div class="form-group col-xs-2">
           <label for="task-priority" class="control-label">Priority</label>
-          <taskana-shared-number-picker [(ngModel)]="task.priority" title="priority" id="task-priority" name="task.priority"></taskana-shared-number-picker>
+          <taskana-shared-number-picker [(ngModel)]="task.priority" title="priority" id="task-priority"
+                                        name="task.priority"></taskana-shared-number-picker>
         </div>
       </div>
     </div>
@@ -74,27 +99,39 @@
       <div class="form-group">
         <label for="task-parent-business-p-id" class="control-label">Parent business process id</label>
         <input type="text" class="form-control" id="task-parent-business-p-id" placeholder="Parent business process iD"
-          [(ngModel)]="task.parentBusinessProcessId" name="task.parentBusinessProcessId">
+               [(ngModel)]="task.parentBusinessProcessId" name="task.parentBusinessProcessId" maxlength="128"
+               #parentBusinessProcessId
+               (keypress)="validateKeypress(parentBusinessProcessId, 128)">
+        <div *ngIf="inputOverflowMap.get(parentBusinessProcessId.name)" class="error">{{lengthError}}</div>
       </div>
       <div class="form-group">
         <label for="task-business-p-id" class="control-label">Business process iD</label>
-        <input type="text" class="form-control" id="task-business-p-id" placeholder="Business process id" [(ngModel)]="task.businessProcessId"
+        <input type="text" class="form-control" id="task-business-p-id" placeholder="Business process id"
-          name="task.businessProcessId">
+               [(ngModel)]="task.businessProcessId" name="task.businessProcessId" maxlength="128" #businessProcessId
+               (keypress)="validateKeypress(businessProcessId, 128)">
+        <div *ngIf="inputOverflowMap.get(businessProcessId.name)" class="error">{{lengthError}}</div>
       </div>
       <div class="input-group form-group col-xs-12">
-        <label for="wb-owner" class="control-label ">Owner</label>
+        <label for="ts-owner" class="control-label ">Owner</label>
-        <taskana-shared-type-ahead *ngIf="(tasksCustomisation$ |async)?.information.owner.lookupField else ownerInput" #owner="ngModel" name="task.owner"
+        <taskana-shared-type-ahead *ngIf="(tasksCustomisation$ |async)?.information.owner.lookupField else ownerInput"
-                                   [(ngModel)]="task.owner" width="100%" [isRequired]="false"></taskana-shared-type-ahead>
+                                   #owner="ngModel" name="task.owner"
+                                   [(ngModel)]="task.owner" width="100%"
+                                   [isRequired]="false"></taskana-shared-type-ahead>
         <ng-template #ownerInput>
-          <input type="text" #task.owner="ngModel" class="form-control" id="ts-owner" placeholder="Owner" [(ngModel)]="task.owner"
+          <input type="text" #owner="ngModel" class="form-control" id="ts-owner" placeholder="Owner"
-            name="task.owner">
+                 [(ngModel)]="task.owner" name="task.owner" maxlength="32"
+                 (keypress)="validateKeypress(owner, 32)">
+          <div *ngIf="inputOverflowMap.get(owner.name)" class="error">{{lengthError}}</div>
         </ng-template>
       </div>
       <div class="row">
         <div class="form-group col-xs-12">
           <div class="form-group">
             <label for="task-note" class="control-label">Note</label>
-            <textarea class="form-control" rows="2" id="task-note" placeholder="Note" [(ngModel)]="task.note" name="task.note"></textarea>
+            <textarea class="form-control" rows="2" id="task-note" placeholder="Note" [(ngModel)]="task.note"
+                      name="task.note" maxlength="4096" #note
+            (keypress)="validateKeypress(note, 4096)"></textarea>
+            <div *ngIf="inputOverflowMap.get(note.name)" class="error">{{lengthError}}</div>
           </div>
         </div>
       </div>

web/src/app/workplace/components/taskdetails-general/general-fields.component.ts

@@ -7,25 +7,27 @@ import {
   ViewChild,
   SimpleChanges,
   OnChanges,
-  HostListener
+  HostListener,
+  OnDestroy
 } from '@angular/core';
 import { Task } from 'app/workplace/models/task';
 import { FormsValidatorService } from 'app/shared/services/forms-validator/forms-validator.service';
 import { NgForm } from '@angular/forms';
 import { DomainService } from 'app/shared/services/domain/domain.service';
 import { Select } from '@ngxs/store';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
 import { EngineConfigurationSelectors } from 'app/shared/store/engine-configuration-store/engine-configuration.selectors';
 import { ClassificationsService } from '../../../shared/services/classifications/classifications.service';
 import { Classification } from '../../../shared/models/classification';
 import { TasksCustomisation } from '../../../shared/models/customisation';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'taskana-task-details-general-fields',
   templateUrl: './general-fields.component.html',
   styleUrls: ['./general-fields.component.scss']
 })
-export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges {
+export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges, OnDestroy {
   @Input()
   task: Task;
 
@@ -39,11 +41,16 @@ export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges {
   @ViewChild('TaskForm', { static: false })
   taskForm: NgForm;
 
-  toogleValidationMap = new Map<string, boolean>();
+  toggleValidationMap = new Map<string, boolean>();
   requestInProgress = false;
   classifications: Classification[];
 
+  readonly lengthError = 'You have reached the maximum length';
+  inputOverflowMap = new Map<string, boolean>();
+  validateKeypress: Function;
+
   @Select(EngineConfigurationSelectors.tasksCustomisation) tasksCustomisation$: Observable<TasksCustomisation>;
+  private destroy$ = new Subject<void>();
 
   constructor(
     private classificationService: ClassificationsService,
@@ -53,6 +60,12 @@ export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     this.getClassificationByDomain();
+    this.formsValidatorService.inputOverflowObservable.pipe(takeUntil(this.destroy$)).subscribe((inputOverflowMap) => {
+      this.inputOverflowMap = inputOverflowMap;
+    });
+    this.validateKeypress = (inputFieldModel, maxLength) => {
+      this.formsValidatorService.validateInputOverflow(inputFieldModel, maxLength);
+    };
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -64,6 +77,11 @@ export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges {
     }
   }
 
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
   isFieldValid(field: string): boolean {
     return this.formsValidatorService.isFieldValid(this.taskForm, field);
   }
@@ -76,7 +94,7 @@ export class TaskdetailsGeneralFieldsComponent implements OnInit, OnChanges {
 
   private validate() {
     this.formsValidatorService.formSubmitAttempt = true;
-    this.formsValidatorService.validateFormInformation(this.taskForm, this.toogleValidationMap).then((value) => {
+    this.formsValidatorService.validateFormInformation(this.taskForm, this.toggleValidationMap).then((value) => {
       if (value) {
         this.formValid.emit(true);
       }