From c395b2019459f1e24494dcdcce21e6aa8e4bd899 Mon Sep 17 00:00:00 2001
From: Jeferson Estevo <jefersonestevo@gmail.com>
Date: Mon, 24 Apr 2017 12:36:48 -0300
Subject: [PATCH 1/2] fix(input-container): New attribute hideRequiredMarker to
 md-input-container

This attribute will enable the user to hide the required marker (star) fron an mdInput even when it's required

Fixes #3681
---
 src/demo-app/input/input-demo.html    |  8 ++++++++
 src/demo-app/input/input-demo.ts      |  1 +
 src/lib/input/input-container.html    |  2 +-
 src/lib/input/input-container.spec.ts | 18 ++++++++++++++++--
 src/lib/input/input-container.ts      |  8 ++++++++
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index bc54fe83ce38..52796da212a8 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -244,6 +244,14 @@ <h4>Textarea</h4>
                [placeholder]="requiredField ? 'Required field' : 'Not required field'">
       </md-input-container>
     </p>
+    <p>
+      <md-checkbox [(ngModel)]="hideRequiredMarker"> Check to hide the required marker:</md-checkbox>
+      <md-input-container [hideRequiredMarker]="hideRequiredMarker" style="width: 300px">
+        <input mdInput
+               required
+               [placeholder]="hideRequiredMarker ? 'Required Without Marker' : 'Required With Marker'">
+      </md-input-container>
+    </p>
     <p>
       <md-button-toggle-group [(ngModel)]="floatingLabel">
         <md-button-toggle value="auto">Auto Float</md-button-toggle>
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()">
           <ng-content select="md-placeholder, mat-placeholder"></ng-content>
           {{_mdInputChild.placeholder}}
-          <span class="mat-placeholder-required" *ngIf="_mdInputChild.required">*</span>
+          <span class="mat-placeholder-required" *ngIf="!hideRequiredMarker && _mdInputChild.required">*</span>
         </label>
       </span>
     </div>
diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts
index 1953bd522e17..a4969ccbeef1 100644
--- a/src/lib/input/input-container.spec.ts
+++ b/src/lib/input/input-container.spec.ts
@@ -371,6 +371,16 @@ 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.componentInstance.hideRequiredMarker = true;
+    fixture.detectChanges();
+
+    let el = fixture.debugElement.query(By.css('label'));
+    expect(el).not.toBeNull();
+    expect(el.nativeElement.textContent).toMatch(/hello/g);
+  });
+
   it('supports the disabled attribute as binding', async(() => {
     const fixture = TestBed.createComponent(MdInputContainerWithDisabled);
     fixture.detectChanges();
@@ -741,9 +751,13 @@ class MdInputContainerWithType {
 }
 
 @Component({
-  template: `<md-input-container><input mdInput required placeholder="hello"></md-input-container>`
+  template: `<md-input-container [hideRequiredMarker]="hideRequiredMarker">
+                <input mdInput required placeholder="hello">
+             </md-input-container>`
 })
-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'; }
 

From 2e2d13eaf32ab44df3d1624dd655481096dbb657 Mon Sep 17 00:00:00 2001
From: Jeferson Estevo <jefersonestevo@gmail.com>
Date: Mon, 24 Apr 2017 14:14:30 -0300
Subject: [PATCH 2/2] fix(input-container): Checking if the input container
 placeholder has the '*' before applying the 'hideRequiredMarker' attribute on
 test. Removing extra leading space on hideRequiredMarker demo.

---
 src/demo-app/input/input-demo.html    | 2 +-
 src/lib/input/input-container.spec.ts | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/demo-app/input/input-demo.html b/src/demo-app/input/input-demo.html
index 52796da212a8..d1ddb5290166 100644
--- a/src/demo-app/input/input-demo.html
+++ b/src/demo-app/input/input-demo.html
@@ -245,7 +245,7 @@ <h4>Textarea</h4>
       </md-input-container>
     </p>
     <p>
-      <md-checkbox [(ngModel)]="hideRequiredMarker"> Check to hide the required marker:</md-checkbox>
+      <md-checkbox [(ngModel)]="hideRequiredMarker">Check to hide the required marker:</md-checkbox>
       <md-input-container [hideRequiredMarker]="hideRequiredMarker" style="width: 300px">
         <input mdInput
                required
diff --git a/src/lib/input/input-container.spec.ts b/src/lib/input/input-container.spec.ts
index a4969ccbeef1..2839b8845556 100644
--- a/src/lib/input/input-container.spec.ts
+++ b/src/lib/input/input-container.spec.ts
@@ -373,11 +373,15 @@ describe('MdInputContainer', function () {
 
   it('hide placeholder required star when set to hide the required marker', () => {
     let fixture = TestBed.createComponent(MdInputContainerPlaceholderRequiredTestComponent);
-    fixture.componentInstance.hideRequiredMarker = true;
     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);
   });