From c365180afb8e702a83d6b1036d4acaeb82b41710 Mon Sep 17 00:00:00 2001
From: Ludek Novy <13610612+ludeknovy@users.noreply.github.com>
Date: Fri, 28 Apr 2023 10:21:57 +0200
Subject: [PATCH] field length error messages displayed (#323)

---
 .../add-new-item/add-new-item.component.html        | 13 ++++++++++++-
 .../scenario/add-new-item/add-new-item.component.ts |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/scenario/add-new-item/add-new-item.component.html b/src/app/scenario/add-new-item/add-new-item.component.html
index 9fd72b9c..2d026eaf 100644
--- a/src/app/scenario/add-new-item/add-new-item.component.html
+++ b/src/app/scenario/add-new-item/add-new-item.component.html
@@ -25,6 +25,8 @@ <h5 class="modal-title" id="modal-basic-title">Add test run</h5>
           aria-describedby="inputGroup-sizing-default">
         <div class="form-control-feedback" *ngIf="environment.errors && (environment.dirty || environment.touched)">
           <p class="form-validation-error" *ngIf="environment.errors.required">Environment is required.</p>
+          <p class="form-validation-error" *ngIf="environment.errors.maxlength">Environment is too long. Max length is 100.</p>
+
         </div>
       </div>
 
@@ -32,18 +34,27 @@ <h5 class="modal-title" id="modal-basic-title">Add test run</h5>
         <label for="name">Name</label>
         <input type="input" id="name" class="form-control" formControlName="name" aria-label="Default"
           aria-describedby="inputGroup-sizing-default">
+        <div class="form-control-feedback" *ngIf="name.errors && (name.dirty || name.touched)">
+          <p class="form-validation-error" *ngIf="name.errors.maxlength">Note is too long. Max length is 200.</p>
+        </div>
       </div>
 
       <div class="form-group mb-3">
         <label for="note">Note</label>
         <input type="note" id="note" class="form-control" formControlName="note" aria-label="Default"
           aria-describedby="inputGroup-sizing-default">
+        <div class="form-control-feedback" *ngIf="note.errors && (note.dirty || note.touched)">
+          <p class="form-validation-error" *ngIf="note.errors.maxlength">Note is too long. Max length is 150.</p>
+        </div>
       </div>
 
       <div class="form-group mb-3">
         <label for="hostname">Hostname</label>
         <input type="hostname" id="hostname" class="form-control" formControlName="hostname" aria-label="Default"
           aria-describedby="inputGroup-sizing-default">
+        <div class="form-control-feedback" *ngIf="hostname.errors && (hostname.dirty || hostname.touched)">
+          <p class="form-validation-error" *ngIf="hostname.errors.maxlength">Hostname is too long. Max length is 200.</p>
+        </div>
       </div>
 
       <div class="form-group mb-3">
@@ -51,7 +62,7 @@ <h5 class="modal-title" id="modal-basic-title">Add test run</h5>
         <input type="hostname" id="resourcesLink" class="form-control" formControlName="resourcesLink" aria-label="Default"
                aria-describedby="inputGroup-sizing-default">
         <div class="form-control-feedback" *ngIf="resourcesLink.errors && (resourcesLink.dirty || resourcesLink.touched)">
-          <p class="form-validation-error" *ngIf="resourcesLink.errors.maxlenght">Link is too long. Max length is 350.</p>
+          <p class="form-validation-error" *ngIf="resourcesLink.errors.maxlength">Link is too long. Max length is 350.</p>
         </div>
       </div>
 
diff --git a/src/app/scenario/add-new-item/add-new-item.component.ts b/src/app/scenario/add-new-item/add-new-item.component.ts
index eb9e040f..dcdb4a6f 100644
--- a/src/app/scenario/add-new-item/add-new-item.component.ts
+++ b/src/app/scenario/add-new-item/add-new-item.component.ts
@@ -54,7 +54,7 @@ export class AddNewItemComponent implements OnInit {
     this.monitoringFile = new FormControl("", []);
     this.environment = new FormControl("", [
       Validators.required,
-      Validators.maxLength(150)
+      Validators.maxLength(100)
     ]);
     this.note = new FormControl("", [
       Validators.maxLength(150)