From cb0b202056ec5dda302bc1b6a12b44518d179bc1 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Fri, 25 Jan 2019 12:08:30 -0700
Subject: [PATCH] Added validation to datalists

---
 .../widget/datalist/datalist.component.html         |  6 ++++++
 .../widget/datalist/datalist.component.ts           |  5 +++++
 .../shared/autocomplete/autocomplete.component.scss | 13 +++++++++++++
 3 files changed, 24 insertions(+)

diff --git a/ui/src/app/schema-form/widget/datalist/datalist.component.html b/ui/src/app/schema-form/widget/datalist/datalist.component.html
index 6ec585342..ece3d7878 100644
--- 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
index 3393bd2c5..aecbe2fc3 100644
--- 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
index b721d9ea2..f794dce0c 100644
--- 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;
+        }
+    }
 }
\ No newline at end of file