From 1c2f6b7cbe98ac43ae37d70a8d50d3152153978b Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Fri, 12 Jan 2018 16:06:49 +0100
Subject: [PATCH] fix(form-field): hide required asterisk if control is
 disabled (#8799)

* No longer shows the required asterisk if the form control is disabled.

Fixes #8251.
---
 src/lib/form-field/form-field.html |  2 +-
 src/lib/input/input.spec.ts        | 17 +++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/lib/form-field/form-field.html b/src/lib/form-field/form-field.html
index f5d6510eb74..9043cb556a6 100644
--- a/src/lib/form-field/form-field.html
+++ b/src/lib/form-field/form-field.html
@@ -41,7 +41,7 @@
           <span
             class="mat-placeholder-required mat-form-field-required-marker"
             aria-hidden="true"
-            *ngIf="!hideRequiredMarker && _control.required">&nbsp;*</span>
+            *ngIf="!hideRequiredMarker && _control.required && !_control.disabled">&nbsp;*</span>
         </label>
       </span>
     </div>
diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
index 7cf2c091bc9..a74de097c75 100644
--- a/src/lib/input/input.spec.ts
+++ b/src/lib/input/input.spec.ts
@@ -413,6 +413,18 @@ describe('MatInput without forms', () => {
     expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g);
   }));
 
+  it('should hide the required star if input is disabled', () => {
+    const fixture = TestBed.createComponent(MatInputPlaceholderRequiredTestComponent);
+
+    fixture.componentInstance.disabled = true;
+    fixture.detectChanges();
+
+    const el = fixture.debugElement.query(By.css('label'));
+
+    expect(el).not.toBeNull();
+    expect(el.nativeElement.textContent).toMatch(/^hello$/);
+  });
+
   it('should hide the required star from screen readers', fakeAsync(() => {
     let fixture = TestBed.createComponent(MatInputPlaceholderRequiredTestComponent);
     fixture.detectChanges();
@@ -1151,11 +1163,12 @@ class MatInputWithType {
 
 @Component({
   template: `<mat-form-field [hideRequiredMarker]="hideRequiredMarker">
-                <input matInput required placeholder="hello">
+                <input matInput required [disabled]="disabled" placeholder="hello">
              </mat-form-field>`
 })
 class MatInputPlaceholderRequiredTestComponent {
-  hideRequiredMarker: boolean;
+  hideRequiredMarker: boolean = false;
+  disabled: boolean = false;
 }
 
 @Component({