add required field validation in mdl select

src/components/select/select.html

@@ -3,6 +3,7 @@
   [class.is-focused]="popoverComponent.isVisible || focused"
   [class.is-disabled]="disabled"
   [class.is-dirty]="isDirty()"
+  [class.is-invalid]="isEmpty() && isValidate"
 >
   <span
       [attr.tabindex]="!disabled ? 0 : null"
@@ -23,7 +24,7 @@
     keyboard_arrow_down
   </span>
   <label class="mdl-textfield__label" [attr.for]="textfieldId">{{ label }}</label>
-  <span class="mdl-textfield__error"></span>
+  <span class="mdl-textfield__error">{{errorMessage}}</span>
   <mdl-popover #popover tabindex="-1"
                [class.direction-up]="directionUp"
                [class.mdl-popover--above]="autocomplete"

src/components/select/select.spec.ts

@@ -2,7 +2,7 @@ import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { MdlSelectModule, MdlSelectComponent } from './select';
 import { Component } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import {FormControl, FormGroup, ReactiveFormsModule} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import { Key } from './keyboard';
 
 // based on @angular/cdk
@@ -312,6 +312,47 @@ describe('MdlSelect', () => {
         }))
     })
 
+    describe('required', () => {
+
+        let fixture: ComponentFixture<TestRequiredComponent>;
+
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                imports: [MdlSelectModule.forRoot(), ReactiveFormsModule],
+                declarations: [TestRequiredComponent]
+            });
+
+            TestBed.compileComponents().then( () => {
+                fixture = TestBed.createComponent(TestRequiredComponent);
+                fixture.detectChanges();
+            });
+        }));
+
+        it('should create the component and validate required field', async(() => {
+            let testInstance = fixture.componentInstance;
+
+            fixture.whenStable().then(() => {
+                expect(testInstance.colorId.valid)
+                  .toBe(false, 'should verify if field is invalid');
+            });
+        }))
+
+        it('should verify invalid class', async(() => {
+            let testInstance = fixture.componentInstance;
+
+            let selectComponent = fixture.debugElement.query(By.directive(MdlSelectComponent));
+
+            let selectNativeElement = selectComponent.nativeElement;
+
+            testInstance.colorId.setValue('');
+
+            fixture.whenStable().then(() => {
+                  expect(selectNativeElement.classList.contains('ng-invalid'))
+                  .toBe(true, 'did not have css class ng-invalid')
+            });
+        }))
+    })
+
     describe('autocomplete', () => {
         let fixture: ComponentFixture<TestAutoCompleteComponent>;
 
@@ -648,6 +689,34 @@ class TestDisabledComponent {
   }
 }
 
+
+@Component({
+    selector: 'test-required-component',
+    template: `
+      <form [formGroup]="form">
+        <mdl-select formControlName="colorId" error-msg="Required field!" validate>
+            <mdl-option *ngFor="let c of colors" [value]="c.code">{{c.name}}</mdl-option>
+        </mdl-select>
+      </form>
+    `
+  })
+
+  class TestRequiredComponent {
+    form: FormGroup;
+    colorId: FormControl = new FormControl('',Validators.required);
+    colors: any = [
+        { name: "Red", code: "r" },
+        { name: "Green", code: "g" },
+        { name: "Blue", code: "b" }
+    ];
+
+    constructor() {
+      this.form = new FormGroup({
+        colorId: this.colorId
+      });
+    }
+  }
+
 @Component({
     selector: 'test-single-component',
     template: `

src/components/select/select.ts

@@ -88,6 +88,11 @@ export class MdlSelectComponent extends SearchableComponent implements ControlVa
     @ViewChild('selectInput') selectInput: ElementRef;
     @ViewChild(MdlPopoverComponent) public popoverComponent: MdlPopoverComponent;
     @ContentChildren(MdlOptionComponent) public optionComponents: QueryList<MdlOptionComponent>;
+    @Input('error-msg') public errorMessage: any = {};
+    @Input('validate')
+    get isValidate() { return this._isValidate; }
+    set isValidate(value) { this._isValidate = toBoolean(value); }
+    private _isValidate: boolean = false;
     private selectElement: HTMLElement;
     private popoverElement: HTMLElement;
     directionUp = false;

src/e2e-app/app/select/select.component.html

@@ -8,15 +8,33 @@ <h5>Reactive form</h5>
   </mdl-select>
 </form>
 
-<pre prism ngNonBindable>
-  <![CDATA[
-<form [formGroup]="form">
-  <mdl-select formControlName="personId">
-    <mdl-option *ngFor="let p of people" [value]="p.id" [disabled]="p.disabled">{{p.name}}</mdl-option>
-  </mdl-select>
-</form>
-   ]]>
-</pre>
+  <pre prism ngNonBindable>
+    <![CDATA[
+  <form [formGroup]="form">
+    <mdl-select formControlName="personId">
+      <mdl-option *ngFor="let p of people" [value]="p.id" [disabled]="p.disabled">{{p.name}}</mdl-option>
+    </mdl-select>
+  </form>
+     ]]>
+  </pre>
+
+  <h6>with required validation</h6>
+
+  <form [formGroup]="form">
+    <mdl-select formControlName="colorId" error-msg="Required field!" validate>
+      <mdl-option *ngFor="let c of colors" [value]="c.code">{{c.name}}</mdl-option>
+    </mdl-select>
+  </form>
+
+  <pre prism ngNonBindable>
+    <![CDATA[
+    <form [formGroup]="form">
+      <mdl-select formControlName="colorId" error-msg="Required field!" validate>
+        <mdl-option *ngFor="let c of colors" [value]="c.code">{{c.name}}</mdl-option>
+      </mdl-select>
+    </form>
+     ]]>
+  </pre>
 
 <h5>autocomplete example</h5>
 

src/e2e-app/app/select/select.component.ts

@@ -8,7 +8,8 @@ import {
 } from '@angular/router';
 import {
   FormGroup,
-  FormControl
+  FormControl,
+  Validators
 } from '@angular/forms';
 
 @Component({
@@ -20,6 +21,8 @@ export class SelectDemo {
   form: FormGroup;
 
   personId: FormControl = new FormControl(1);
+  colorId: FormControl = new FormControl('',Validators.required);
+
   people: any[] = [
     {id: 1, name: 'Bryan Cranston'},
     {id: 2, name: 'Aaron Paul'},
@@ -91,7 +94,8 @@ export class SelectDemo {
 
   ngOnInit() {
     this.form = new FormGroup({
-      personId: this.personId
+      personId: this.personId,
+      colorId:this.colorId
     });
 
     this.arrayForm = new FormGroup({
@@ -115,6 +119,11 @@ export class SelectDemo {
       .subscribe((value: any) => {
         console.log('personId.valueChanges', value);
       });
+
+      this.colorId.valueChanges
+      .subscribe((value: any) => {
+        console.log('colorId.valueChanges', value);
+      });
   }
 
   onChange(value: any) {