Skip to content

Commit

Permalink
fix(form-field): hide required asterisk if control is disabled
Browse files Browse the repository at this point in the history
* No longer shows the required asterisk if the form control is disabled.

Fixes angular#8251.
  • Loading branch information
devversion committed Dec 31, 2017
1 parent c3d7cd9 commit afa170e
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 3 deletions.
2 changes: 1 addition & 1 deletion src/lib/form-field/form-field.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
17 changes: 15 additions & 2 deletions src/lib/input/input.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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({
Expand Down

0 comments on commit afa170e

Please sign in to comment.