field length error messages displayed (#323)

ludeknovy · Apr 28, 2023 · c365180 · c365180
1 parent fdc5568
commit c365180
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 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
@@ -25,33 +25,44 @@ <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>
 
       <div class="form-group mb-3">
         <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">
         <label for="resourcesLink">External Link</label>
         <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
@@ -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)