diff --git a/src/components/input/input.html b/src/components/input/input.html
index d905b20ce6ce..2b0ed7adc9aa 100644
--- a/src/components/input/input.html
+++ b/src/components/input/input.html
@@ -12,7 +12,7 @@
[attr.aria-disabled]="ariaDisabled"
[attr.aria-required]="ariaRequired"
[attr.aria-invalid]="ariaInvalid"
- [id]="id"
+ [id]="inputId"
[disabled]="disabled"
[required]="required"
[spellcheck]="spellcheck"
diff --git a/src/components/input/input.spec.ts b/src/components/input/input.spec.ts
index 9d4f393b4b8e..6a3e5aadea76 100644
--- a/src/components/input/input.spec.ts
+++ b/src/components/input/input.spec.ts
@@ -54,6 +54,26 @@ export function main() {
});
});
+ it('should have a different ID for outer element and internal input', () => {
+ return builder
+ .overrideTemplate(MdInputBaseTestController, `
+
+ `)
+ .createAsync(MdInputBaseTestController)
+ .then(fixture => {
+ fixture.detectChanges();
+ fakeAsync(() => {
+ const componentElement: HTMLElement = fixture.debugElement
+ .query(By.directive(MdInput)).nativeElement;
+ const inputElement: HTMLInputElement = fixture.debugElement.query(By.css('input'))
+ .nativeElement;
+ expect(componentElement.id).toBe('test-id');
+ expect(inputElement.id).toBeTruthy();
+ expect(inputElement.id).not.toBe(componentElement.id);
+ })();
+ });
+ });
+
it('counts characters', () => {
return builder.createAsync(MdInputBaseTestController).then(fixture => {
let instance = fixture.componentInstance;
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index 104f63931e87..316bbd031e18 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -128,6 +128,7 @@ export class MdInput implements ControlValueAccessor, AfterContentInit, OnChange
get characterCount(): number {
return this.empty ? 0 : ('' + this._value).length;
}
+ get inputId(): string { return `${this.id}-input`; }
/**
* Bindings.