Added visual test

e2e/select-field.e2e-spec.ts

@@ -21,6 +21,15 @@ describe('Select field', () => {
     expect('#screenshot-select-field-single-mode').toMatchBaselineScreenshot(done);
   });
 
+  it('should match previous single mode screenshot with validation', (done) => {
+    element(by.css('#screenshot-select-field-single-mode .sky-input-group.sky-btn')).click();
+    element(by.css('.sky-modal-btn-close')).click();
+    SkyHostBrowser.moveCursorOffScreen();
+    expect('#screenshot-select-field-single-mode-wrapper').toMatchBaselineScreenshot(done, {
+      screenshotName: 'select-field-single-mode-validation'
+    });
+  });
+
   it('should match previous multiple mode selected screenshot', (done) => {
     element(by.css('#select-field-populate-selected-btn')).click();
     expect('#screenshot-select-field-multiple-mode').toMatchBaselineScreenshot(done);

src/app/public/modules/select-field/select-field.component.ts

@@ -179,6 +179,7 @@ export class SkySelectFieldComponent implements ControlValueAccessor {
               this.writeValue(result.data);
             }
           }
+          this.onTouched();
         });
       });
   }
@@ -197,9 +198,9 @@ export class SkySelectFieldComponent implements ControlValueAccessor {
 
   // Angular automatically constructs these methods.
   /* istanbul ignore next */
-  public onChange = (value: any) => {};
+  public onChange = (value: any) => { };
   /* istanbul ignore next */
-  public onTouched = () => {};
+  public onTouched = () => { };
 
   public registerOnChange(fn: (value: any) => void) {
     this.onChange = fn;

src/app/visual/select-field/select-field-visual.component.html

@@ -1,12 +1,16 @@
-
-<div id="screenshot-select-field-single-mode">
-  <sky-select-field
-    selectMode="single"
-    name="single"
-    [ngModel]="model.single"
-    [data]="data">
-  </sky-select-field>
+<br/>
+<div id="screenshot-select-field-single-mode-wrapper" style="padding: 5px 0;">
+  <div id="screenshot-select-field-single-mode">
+    <sky-select-field
+      selectMode="single"
+      name="single"
+      [ngModel]="model.single"
+      [data]="data"
+      required>
+    </sky-select-field>
+  </div>
 </div>
+<br/>
 <div id="screenshot-select-field-multiple-mode">
   <sky-select-field
     selectMode="multiple"

src/app/visual/select-field/select-field-visual.component.ts

@@ -2,7 +2,9 @@ import {
   Component
 } from '@angular/core';
 
-import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import {
+  BehaviorSubject
+} from 'rxjs/BehaviorSubject';
 
 @Component({
   selector: 'select-field-visual',