fix(select): add ngModel support to select. closes #157

carbon-design-system · Oct 22, 2018 · ff31a37 · ff31a37
1 parent f1d4674
commit ff31a37
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 13 deletions.
diff --git a/src/select/select.component.ts b/src/select/select.component.ts
@@ -1,23 +1,86 @@
-import { Component, Input } from "@angular/core";
+import {
+	Component,
+	Input,
+	Output,
+	ViewChild,
+	ElementRef,
+	HostListener,
+	EventEmitter
+} from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 
 @Component({
 	selector: "ibm-select",
 	template: `
 		<div class="bx--form-item">
 			<div class="bx--select">
 				<label [attr.for]="id" class="bx--label">{{label}}</label>
-				<select [attr.id]="id" class="bx--select-input">
+				<select
+					#select
+					[attr.id]="id"
+					[disabled]="disabled"
+					(change)="onChange($event)"
+					class="bx--select-input">
 					<ng-content></ng-content>
 				</select>
 				<svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
 				<path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
 				</svg>
 			</div>
 		</div>
-	`
+	`,
+	providers: [
+		{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: Select,
+			multi: true
+		}
+	]
 })
-export class Select {
+export class Select implements ControlValueAccessor {
 	static selectCount = 0;
 	@Input() label = "Select label";
 	@Input() id = `select-${Select.selectCount++}`;
+	@Input() disabled = false;
+
+	@Output() change = new EventEmitter();
+
+	@ViewChild("select") select: ElementRef;
+
+	private onChangeHandler;
+	private onTouchedHandler;
+
+	get value() {
+		return this.select.nativeElement.value;
+	}
+
+	set value(v) {
+		this.select.nativeElement.value = v;
+	}
+
+	writeValue(obj: any) {
+		this.select.nativeElement.value = obj;
+	}
+
+	registerOnChange(fn: any) {
+		this.onChangeHandler = fn;
+	}
+
+	registerOnTouched(fn: any) {
+		this.onTouchedHandler = fn;
+	}
+
+	setDisabledState(isDisabled: boolean) {
+		this.disabled = isDisabled;
+	}
+
+	onChange(event) {
+		this.onChangeHandler(event.target.value);
+		this.change.emit(event);
+	}
+
+	@HostListener("blur")
+	private blur() {
+		this.onTouchedHandler();
+	}
 }
diff --git a/src/select/select.stories.ts b/src/select/select.stories.ts
@@ -14,15 +14,30 @@ storiesOf("Select", module).addDecorator(
 		template: `
 		<ibm-select>
 			<option value="" disabled selected hidden>Choose an option</option>
-          <option value="solong">A much longer option that is worth having around to check how text flows</option>
-          <optgroup label="Category 1">
-              <option value="option1">Option 1</option>
-              <option value="option2">Option 2</option>
-          </optgroup>
-          <optgroup label="Category 2">
-              <option value="option1">Option 1</option>
-              <option value="option2">Option 2</option>
-          </optgroup>
+        	<option value="solong">A much longer option that is worth having around to check how text flows</option>
+        	<optgroup label="Category 1">
+            	<option value="option1">Option 1</option>
+            	<option value="option2">Option 2</option>
+        	</optgroup>
+    		<optgroup label="Category 2">
+            	<option value="option1">Option 1</option>
+            	<option value="option2">Option 2</option>
+          	</optgroup>
 		</ibm-select>
 	`
+	}))
+	.add("With ngModel", () => ({
+		template: `
+			<ibm-select [(ngModel)]="model">
+				<option value="default" disabled selected hidden>Choose an option</option>
+				<option value="option1">Option 1</option>
+				<option value="option2">Option 2</option>
+				<option value="option3">Option 3</option>
+			</ibm-select>
+			<br>
+			<span>Selected: {{ model }}</span>
+		`,
+		props: {
+			model: "default"
+		}
 	}));