fix(input-container): New attribute hideRequiredMarker (#4237)

* 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

* 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.

Author: jefersonestevo

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>

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;

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>

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: `<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: `

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'; }