fix: improve request editor input validation error display

closes #21
toedter · Feb 21, 2021 · 91b82e0 · 91b82e0
1 parent 2694846
commit 91b82e0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/app/request/request.component.html b/src/app/request/request.component.html
@@ -126,9 +126,10 @@ <h5 class="modal-title">HTTP Request Input</h5>
                        name="{{item.name}}" id="request-input-{{item.name}}" #ngModel="ngModel"
                        type="{{item.type}}"
                        placeholder="{{item.placeholder}}"
-                       [appHalFormsProperty]="item" [title]="getValidationErrors(ngModel)"
+                       [appHalFormsProperty]="item"
                        (change)="halFormsPropertyChanged()"
                        (keyup)="halFormsPropertyChanged()">
+                <div class="error-text">{{getValidationErrors(ngModel)}}</div>
               </div>
             </div>
             <hr>

diff --git a/src/styles.css b/src/styles.css
@@ -12,6 +12,10 @@ pre {padding: 5px; margin: 5px; color: inherit !important}
   border-left: 5px solid #a94442 !important; /* red, overrides also default blue when editing */
 }
 
+.error-text {
+  color: #a94442;
+}
+
 .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   color: lightgrey;
   opacity: 1; /* Firefox */