Skip to content

Commit b2671d1

Browse files
committed
fix(material/select): show required asterisk when using required validator
Similar to #23362. Fixes that the required asterisk wasn't being shown when a select is required.
1 parent f3e8196 commit b2671d1

File tree

3 files changed

+16
-4
lines changed

3 files changed

+16
-4
lines changed

src/material-experimental/mdc-select/select.spec.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2844,6 +2844,11 @@ expect(panel.scrollTop)
28442844
subscription.unsubscribe();
28452845
}));
28462846

2847+
it('should set an asterisk after the label if the FormControl is required', fakeAsync(() => {
2848+
const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label');
2849+
expect(label.classList).toContain('mdc-floating-label--required');
2850+
}));
2851+
28472852
});
28482853

28492854
describe('with custom error behavior', () => {
@@ -4539,7 +4544,8 @@ class InvalidSelectInForm {
45394544
template: `
45404545
<form [formGroup]="formGroup">
45414546
<mat-form-field>
4542-
<mat-select placeholder="Food" formControlName="food">
4547+
<mat-label>Food</mat-label>
4548+
<mat-select formControlName="food">
45434549
<mat-option *ngFor="let option of options" [value]="option.value">
45444550
{{option.viewValue}}
45454551
</mat-option>

src/material/select/select.spec.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2911,6 +2911,10 @@ describe('MatSelect', () => {
29112911
subscription.unsubscribe();
29122912
}));
29132913

2914+
it('should set an asterisk after the label if the FormControl is required', fakeAsync(() => {
2915+
expect(fixture.nativeElement.querySelector('.mat-form-field-required-marker')).toBeTruthy();
2916+
}));
2917+
29142918
});
29152919

29162920
describe('with custom error behavior', () => {

src/material/select/select.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ import {
5959
ViewChild,
6060
ViewEncapsulation,
6161
} from '@angular/core';
62-
import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
62+
import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm, Validators} from '@angular/forms';
6363
import {
6464
_countGroupLabelsBeforeOption,
6565
_getOptionScrollPosition,
@@ -317,12 +317,14 @@ export abstract class _MatSelectBase<C> extends _MatSelectMixinBase implements A
317317

318318
/** Whether the component is required. */
319319
@Input()
320-
get required(): boolean { return this._required; }
320+
get required(): boolean {
321+
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
322+
}
321323
set required(value: boolean) {
322324
this._required = coerceBooleanProperty(value);
323325
this.stateChanges.next();
324326
}
325-
private _required: boolean = false;
327+
private _required: boolean | undefined;
326328

327329
/** Whether the user should be allowed to select multiple options. */
328330
@Input()

0 commit comments

Comments
 (0)