fix(material/select): show required asterisk when using required vali…

…dator (#23500) Similar to #23362. Fixes that the required asterisk wasn't being shown when a select is required.
angular · Oct 5, 2021 · 64ba72f · 64ba72f
1 parent 7c16258
commit 64ba72f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/src/material-experimental/mdc-select/select.spec.ts b/src/material-experimental/mdc-select/select.spec.ts
@@ -2867,6 +2867,11 @@ expect(panel.scrollTop)
       subscription.unsubscribe();
     }));
 
+    it('should set an asterisk after the label if the FormControl is required', fakeAsync(() => {
+      const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label');
+      expect(label.classList).toContain('mdc-floating-label--required');
+    }));
+
   });
 
   describe('with custom error behavior', () => {
@@ -4562,7 +4567,8 @@ class InvalidSelectInForm {
   template: `
     <form [formGroup]="formGroup">
       <mat-form-field>
-        <mat-select placeholder="Food" formControlName="food">
+        <mat-label>Food</mat-label>
+        <mat-select formControlName="food">
           <mat-option *ngFor="let option of options" [value]="option.value">
             {{option.viewValue}}
           </mat-option>

diff --git a/src/material/select/select.spec.ts b/src/material/select/select.spec.ts
@@ -2934,6 +2934,10 @@ describe('MatSelect', () => {
       subscription.unsubscribe();
     }));
 
+    it('should set an asterisk after the label if the FormControl is required', fakeAsync(() => {
+      expect(fixture.nativeElement.querySelector('.mat-form-field-required-marker')).toBeTruthy();
+    }));
+
   });
 
   describe('with custom error behavior', () => {

diff --git a/src/material/select/select.ts b/src/material/select/select.ts
@@ -59,7 +59,13 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms';
+import {
+  ControlValueAccessor,
+  FormGroupDirective,
+  NgControl,
+  NgForm,
+  Validators,
+} from '@angular/forms';
 import {
   _countGroupLabelsBeforeOption,
   _getOptionScrollPosition,
@@ -317,12 +323,14 @@ export abstract class _MatSelectBase<C> extends _MatSelectMixinBase implements A
 
   /** Whether the component is required. */
   @Input()
-  get required(): boolean { return this._required; }
+  get required(): boolean {
+    return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+  }
   set required(value: boolean) {
     this._required = coerceBooleanProperty(value);
     this.stateChanges.next();
   }
-  private _required: boolean = false;
+  private _required: boolean | undefined;
 
   /** Whether the user should be allowed to select multiple options. */
   @Input()