Added validation to datalists

TIER · Jan 25, 2019 · cb0b202 · cb0b202
1 parent a8de8da
commit cb0b202
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 0 deletions.
diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
@@ -21,4 +21,10 @@
         role="textbox"
         [attr.aria-label]="schema.title | translate">
     </auto-complete>
+    <small class="form-text text-danger" *ngIf="errorMessages && errorMessages.length && control.touched">
+        <ng-container *ngFor="let error of errorMessages; let first=first;">
+            <ng-container *ngIf="!first">, </ng-container>
+            <translate-i18n [key]="getError(error)">error</translate-i18n>
+        </ng-container>
+    </small>
 </div>
diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.ts b/ui/src/app/schema-form/widget/datalist/datalist.component.ts
@@ -2,6 +2,7 @@ import { Component, AfterViewInit } from '@angular/core';
 
 import { ControlWidget } from 'ngx-schema-form';
 import { SchemaService } from '../../service/schema.service';
+import { HARD_CODED_REQUIRED_MSG } from '../../model/messages';
 
 @Component({
     selector: 'datalist-component',
@@ -26,4 +27,8 @@ export class DatalistComponent extends ControlWidget implements AfterViewInit {
     get required(): boolean {
         return this.widgetService.isRequired(this.formProperty);
     }
+
+    getError(error: string): string {
+        return HARD_CODED_REQUIRED_MSG.test(error) ? 'message.required' : error;
+    }
 }
diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.scss b/ui/src/app/shared/autocomplete/autocomplete.component.scss
@@ -1,5 +1,6 @@
 @import "~bootstrap/scss/functions";
 @import "~bootstrap/scss/variables";
+@import "../../../theme/palette";
 
 .dropdown.form-group {
     margin-bottom: 0px;
@@ -14,4 +15,16 @@
     .btn-outline-secondary {
         border-color: $input-border-color;
     }
+
+    &.is-invalid {
+        input.form-control {
+            border-color: $brand-danger;
+        }
+    }
+
+    &.is-valid {
+        input.form-control {
+            border-color: $brand-success;
+        }
+    }
 }