diff --git a/src/components/select/select.html b/src/components/select/select.html index 3514be18..430eea99 100644 --- a/src/components/select/select.html +++ b/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" > - + {{errorMessage}} { })) }) + describe('required', () => { + + let fixture: ComponentFixture; + + 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; @@ -648,6 +689,34 @@ class TestDisabledComponent { } } + +@Component({ + selector: 'test-required-component', + template: ` +
+ + {{c.name}} + +
+ ` + }) + + 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: ` diff --git a/src/components/select/select.ts b/src/components/select/select.ts index 6a949f49..61284d89 100755 --- a/src/components/select/select.ts +++ b/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; + @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; diff --git a/src/e2e-app/app/select/select.component.html b/src/e2e-app/app/select/select.component.html index e3a17a43..f61b94bf 100755 --- a/src/e2e-app/app/select/select.component.html +++ b/src/e2e-app/app/select/select.component.html @@ -8,15 +8,33 @@
Reactive form
-
-  
-  
-    {{p.name}}
-  
-
-   ]]>
-
+
+    
+    
+      {{p.name}}
+    
+  
+     ]]>
+  
+ +
with required validation
+ +
+ + {{c.name}} + +
+ +
+    
+      
+        {{c.name}}
+      
+    
+     ]]>
+  
autocomplete example
diff --git a/src/e2e-app/app/select/select.component.ts b/src/e2e-app/app/select/select.component.ts index 16549c45..bba50369 100755 --- a/src/e2e-app/app/select/select.component.ts +++ b/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) {