Skip to content

Commit 64ba72f

Browse files
authored
fix(material/select): show required asterisk when using required validator (#23500)
Similar to #23362. Fixes that the required asterisk wasn't being shown when a select is required.
1 parent 7c16258 commit 64ba72f

File tree

3 files changed

+22
-4
lines changed

3 files changed

+22
-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
@@ -2867,6 +2867,11 @@ expect(panel.scrollTop)
28672867
subscription.unsubscribe();
28682868
}));
28692869

2870+
it('should set an asterisk after the label if the FormControl is required', fakeAsync(() => {
2871+
const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label');
2872+
expect(label.classList).toContain('mdc-floating-label--required');
2873+
}));
2874+
28702875
});
28712876

28722877
describe('with custom error behavior', () => {
@@ -4562,7 +4567,8 @@ class InvalidSelectInForm {
45624567
template: `
45634568
<form [formGroup]="formGroup">
45644569
<mat-form-field>
4565-
<mat-select placeholder="Food" formControlName="food">
4570+
<mat-label>Food</mat-label>
4571+
<mat-select formControlName="food">
45664572
<mat-option *ngFor="let option of options" [value]="option.value">
45674573
{{option.viewValue}}
45684574
</mat-option>

src/material/select/select.spec.ts

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

2937+
it('should set an asterisk after the label if the FormControl is required', fakeAsync(() => {
2938+
expect(fixture.nativeElement.querySelector('.mat-form-field-required-marker')).toBeTruthy();
2939+
}));
2940+
29372941
});
29382942

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

src/material/select/select.ts

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,13 @@ import {
5959
ViewChild,
6060
ViewEncapsulation,
6161
} from '@angular/core';
62-
import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
62+
import {
63+
ControlValueAccessor,
64+
FormGroupDirective,
65+
NgControl,
66+
NgForm,
67+
Validators,
68+
} from '@angular/forms';
6369
import {
6470
_countGroupLabelsBeforeOption,
6571
_getOptionScrollPosition,
@@ -317,12 +323,14 @@ export abstract class _MatSelectBase<C> extends _MatSelectMixinBase implements A
317323

318324
/** Whether the component is required. */
319325
@Input()
320-
get required(): boolean { return this._required; }
326+
get required(): boolean {
327+
return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
328+
}
321329
set required(value: boolean) {
322330
this._required = coerceBooleanProperty(value);
323331
this.stateChanges.next();
324332
}
325-
private _required: boolean = false;
333+
private _required: boolean | undefined;
326334

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

0 commit comments

Comments
 (0)