feat(material/form-field): add color to default options (#24438)

closes #24438

Author: lekhmanrus

src/material-experimental/mdc-form-field/form-field.ts

@@ -69,9 +69,18 @@ export type SubscriptSizing = 'fixed' | 'dynamic';
  * using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
  */
 export interface MatFormFieldDefaultOptions {
+  /** Default form-field appearance style. */
   appearance?: MatFormFieldAppearance;
+  /** Default color of the form-field. */
+  color?: ThemePalette;
+  /** Whether the required marker should be hidden by default. */
   hideRequiredMarker?: boolean;
+  /**
+   * Whether the label for form-fields should by default float `always`,
+   * `never`, or `auto` (only when necessary).
+   */
   floatLabel?: FloatLabelType;
+  /** Whether the form field should reserve space for one line by default. */
   subscriptSizing?: SubscriptSizing;
 }
 
@@ -147,7 +156,7 @@ const WRAPPER_HORIZONTAL_PADDING = 16;
   providers: [{provide: MAT_FORM_FIELD, useExisting: MatFormField}],
 })
 export class MatFormField
-  implements AfterViewInit, OnDestroy, AfterContentChecked, AfterContentInit
+  implements AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy
 {
   @ViewChild('textField') _textField: ElementRef<HTMLElement>;
   @ViewChild('iconPrefixContainer') _iconPrefixContainer: ElementRef<HTMLElement>;
@@ -172,10 +181,17 @@ export class MatFormField
   set hideRequiredMarker(value: BooleanInput) {
     this._hideRequiredMarker = coerceBooleanProperty(value);
   }
-  private _hideRequiredMarker: boolean;
+  private _hideRequiredMarker = false;
 
   /** The color palette for the form-field. */
-  @Input() color: ThemePalette = 'primary';
+  @Input()
+  get color(): ThemePalette {
+    return this._color;
+  }
+  set color(value: ThemePalette) {
+    this._color = value || this._defaults?.color || 'primary';
+  }
+  private _color: ThemePalette = 'primary';
 
   /** Whether the label should always float or float as the user types. */
   @Input()
@@ -201,7 +217,7 @@ export class MatFormField
   }
   set appearance(value: MatFormFieldAppearance) {
     const oldValue = this._appearance;
-    this._appearance = value || (this._defaults && this._defaults.appearance) || DEFAULT_APPEARANCE;
+    this._appearance = value || this._defaults?.appearance || DEFAULT_APPEARANCE;
     if (this._appearance === 'outline' && this._appearance !== oldValue) {
       this._refreshOutlineNotchWidth();
 
@@ -363,11 +379,12 @@ export class MatFormField
     @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
     @Inject(DOCUMENT) private _document?: any,
   ) {
-    if (_defaults && _defaults.appearance) {
-      this.appearance = _defaults.appearance;
+    if (_defaults) {
+      if (_defaults.appearance) {
+        this.appearance = _defaults.appearance;
+      }
+      this._hideRequiredMarker = Boolean(_defaults?.hideRequiredMarker);
     }
-
-    this._hideRequiredMarker = _defaults?.hideRequiredMarker ?? false;
   }
 
   ngAfterViewInit() {

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

@@ -1405,6 +1405,18 @@ describe('MatFormField default options', () => {
     expect(fixture.componentInstance.formField.appearance).toBe('outline');
   });
 
+  it('should be able to change the default color', () => {
+    const fixture = createComponent(MatInputWithColor, [
+      {
+        provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+        useValue: {color: 'accent'},
+      },
+    ]);
+    fixture.detectChanges();
+    const formField = fixture.nativeElement.querySelector('.mat-mdc-form-field');
+    expect(formField.classList).toContain('mat-accent');
+  });
+
   it('defaults subscriptSizing to false', () => {
     const fixture = createComponent(MatInputWithSubscriptSizing);
     fixture.detectChanges();

src/material/form-field/form-field.ts

@@ -28,7 +28,7 @@ import {
   ViewEncapsulation,
   OnDestroy,
 } from '@angular/core';
-import {CanColor, mixinColor} from '@angular/material/core';
+import {CanColor, mixinColor, ThemePalette} from '@angular/material/core';
 import {fromEvent, merge, Subject} from 'rxjs';
 import {startWith, take, takeUntil} from 'rxjs/operators';
 import {MAT_ERROR, MatError} from './error';
@@ -74,7 +74,11 @@ export type FloatLabelType = 'always' | 'never' | 'auto';
  * using the `MAT_FORM_FIELD_DEFAULT_OPTIONS` injection token.
  */
 export interface MatFormFieldDefaultOptions {
+  /** Default form-field appearance style. */
   appearance?: MatFormFieldAppearance;
+  /** Default color of the form-field. */
+  color?: ThemePalette;
+  /** Whether the required marker should be hidden by default. */
   hideRequiredMarker?: boolean;
   /**
    * Whether the label for form-fields should by default float `always`,
@@ -166,7 +170,7 @@ export class MatFormField
   set appearance(value: MatFormFieldAppearance) {
     const oldValue = this._appearance;
 
-    this._appearance = value || (this._defaults && this._defaults.appearance) || 'legacy';
+    this._appearance = value || this._defaults?.appearance || 'legacy';
 
     if (this._appearance === 'outline' && oldValue !== value) {
       this._outlineGapCalculationNeededOnStable = true;
@@ -182,7 +186,7 @@ export class MatFormField
   set hideRequiredMarker(value: BooleanInput) {
     this._hideRequiredMarker = coerceBooleanProperty(value);
   }
-  private _hideRequiredMarker: boolean;
+  private _hideRequiredMarker = false;
 
   /** Override for the logic that disables the label animation in certain cases. */
   private _showAlwaysAnimate = false;
@@ -282,9 +286,13 @@ export class MatFormField
     this._animationsEnabled = _animationMode !== 'NoopAnimations';
 
     // Set the default through here so we invoke the setter on the first run.
-    this.appearance = _defaults && _defaults.appearance ? _defaults.appearance : 'legacy';
-    this._hideRequiredMarker =
-      _defaults && _defaults.hideRequiredMarker != null ? _defaults.hideRequiredMarker : false;
+    this.appearance = _defaults?.appearance || 'legacy';
+    if (_defaults) {
+      this._hideRequiredMarker = Boolean(_defaults.hideRequiredMarker);
+      if (_defaults.color) {
+        this.color = this.defaultColor = _defaults.color;
+      }
+    }
   }
 
   /**

src/material/input/input.spec.ts

@@ -1845,6 +1845,18 @@ describe('MatFormField default options', () => {
     expect(fixture.componentInstance.formField.hideRequiredMarker).toBe(true);
     expect(fixture.componentInstance.formField.appearance).toBe('outline');
   });
+
+  it('should be able to change the default color', () => {
+    const fixture = createComponent(MatInputWithColor, [
+      {
+        provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+        useValue: {color: 'accent'},
+      },
+    ]);
+    fixture.detectChanges();
+    const formField = fixture.nativeElement.querySelector('.mat-form-field');
+    expect(formField.classList).toContain('mat-accent');
+  });
 });
 
 function createComponent<T>(

tools/public_api_guard/material/form-field.md

@@ -26,6 +26,7 @@ import { Observable } from 'rxjs';
 import { OnDestroy } from '@angular/core';
 import { Platform } from '@angular/cdk/platform';
 import { QueryList } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
 
 // @public
 export type FloatLabelType = 'always' | 'never' | 'auto';
@@ -179,10 +180,9 @@ export abstract class MatFormFieldControl<T> {
 
 // @public
 export interface MatFormFieldDefaultOptions {
-    // (undocumented)
     appearance?: MatFormFieldAppearance;
+    color?: ThemePalette;
     floatLabel?: FloatLabelType;
-    // (undocumented)
     hideRequiredMarker?: boolean;
 }