diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html index bc54fe83ce38..d1ddb5290166 100644 --- a/src/demo-app/input/input-demo.html +++ b/src/demo-app/input/input-demo.html @@ -244,6 +244,14 @@

Textarea

[placeholder]="requiredField ? 'Required field' : 'Not required field'">

+

+ Check to hide the required marker: + + + +

Auto Float diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts index 30d27810f522..f389aa8bbd3b 100644 --- a/src/demo-app/input/input-demo.ts +++ b/src/demo-app/input/input-demo.ts @@ -16,6 +16,7 @@ export class InputDemo { floatingLabel: string = 'auto'; color: boolean; requiredField: boolean; + hideRequiredMarker: boolean; ctrlDisabled = false; name: string; diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html index 451641b777dc..dbcbb3d12e5e 100644 --- a/src/lib/input/input-container.html +++ b/src/lib/input/input-container.html @@ -18,7 +18,7 @@ *ngIf="_hasPlaceholder()"> {{_mdInputChild.placeholder}} - * + * diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts index 1953bd522e17..2839b8845556 100644 --- a/src/lib/input/input-container.spec.ts +++ b/src/lib/input/input-container.spec.ts @@ -371,6 +371,20 @@ describe('MdInputContainer', function () { expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g); }); + it('hide placeholder required star when set to hide the required marker', () => { + let fixture = TestBed.createComponent(MdInputContainerPlaceholderRequiredTestComponent); + fixture.detectChanges(); + + let el = fixture.debugElement.query(By.css('label')); + expect(el).not.toBeNull(); + expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g); + + fixture.componentInstance.hideRequiredMarker = true; + fixture.detectChanges(); + + expect(el.nativeElement.textContent).toMatch(/hello/g); + }); + it('supports the disabled attribute as binding', async(() => { const fixture = TestBed.createComponent(MdInputContainerWithDisabled); fixture.detectChanges(); @@ -741,9 +755,13 @@ class MdInputContainerWithType { } @Component({ - template: `` + template: ` + + ` }) -class MdInputContainerPlaceholderRequiredTestComponent {} +class MdInputContainerPlaceholderRequiredTestComponent { + hideRequiredMarker: boolean; +} @Component({ template: ` diff --git a/src/lib/input/input-container.ts b/src/lib/input/input-container.ts index 470032a12616..210f77afd4ce 100644 --- a/src/lib/input/input-container.ts +++ b/src/lib/input/input-container.ts @@ -297,6 +297,14 @@ export class MdInputContainer implements AfterViewInit, AfterContentInit { get dividerColor() { return this.color; } set dividerColor(value) { this.color = value; } + /** Whether we should hide the required marker. */ + @Input() + get hideRequiredMarker() { return this._hideRequiredMarker; } + set hideRequiredMarker(value: any) { + this._hideRequiredMarker = coerceBooleanProperty(value); + } + private _hideRequiredMarker: boolean; + /** Whether the floating label should always float or not. */ get _shouldAlwaysFloat() { return this._floatPlaceholder === 'always'; }