feat(form-field): allow setting default appearance via provider (#9815)

Author: mmalerba

src/lib/form-field/form-field.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {Directionality} from '@angular/cdk/bidi';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {
   AfterContentChecked,
@@ -18,6 +19,7 @@ import {
   ContentChildren,
   ElementRef,
   Inject,
+  InjectionToken,
   Input,
   Optional,
   QueryList,
@@ -48,7 +50,6 @@ import {MatLabel} from './label';
 import {MatPlaceholder} from './placeholder';
 import {MatPrefix} from './prefix';
 import {MatSuffix} from './suffix';
-import {Directionality} from '@angular/cdk/bidi';
 
 
 let nextUniqueId = 0;
@@ -69,6 +70,14 @@ export const _MatFormFieldMixinBase = mixinColor(MatFormFieldBase, 'primary');
 export type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline';
 
 
+export interface MatFormFieldDefaultOptions {
+  appearance?: MatFormFieldAppearance;
+}
+
+export const MAT_FORM_FIELD_DEFAULT_OPTIONS =
+    new InjectionToken<MatFormFieldDefaultOptions>('MAT_FORM_FIELD_DEFAULT_OPTIONS');
+
+
 /** Container for form controls that applies Material Design styling and behavior. */
 @Component({
   moduleId: module.id,
@@ -122,7 +131,14 @@ export class MatFormField extends _MatFormFieldMixinBase
   private _labelOptions: LabelOptions;
 
   /** The form-field appearance style. */
-  @Input() appearance: MatFormFieldAppearance = 'legacy';
+  @Input()
+  get appearance(): MatFormFieldAppearance {
+    return this._appearance || this._defaultOptions && this._defaultOptions.appearance || 'legacy';
+  }
+  set appearance(value: MatFormFieldAppearance) {
+    this._appearance = value;
+  }
+  _appearance: MatFormFieldAppearance;
 
   /**
    * @deprecated Use `color` instead.
@@ -220,7 +236,9 @@ export class MatFormField extends _MatFormFieldMixinBase
       public _elementRef: ElementRef,
       private _changeDetectorRef: ChangeDetectorRef,
       @Optional() @Inject(MAT_LABEL_GLOBAL_OPTIONS) labelOptions: LabelOptions,
-      @Optional() private _dir: Directionality) {
+      @Optional() private _dir: Directionality,
+      @Optional() @Inject(MAT_FORM_FIELD_DEFAULT_OPTIONS) private _defaultOptions:
+          MatFormFieldDefaultOptions) {
     super(_elementRef);
 
     this._labelOptions = labelOptions ? labelOptions : {};

src/lib/input/input.spec.ts

@@ -20,7 +20,7 @@ import {
 import {
   getMatFormFieldDuplicatedHintError,
   getMatFormFieldMissingControlError,
-  getMatFormFieldPlaceholderConflictError,
+  getMatFormFieldPlaceholderConflictError, MAT_FORM_FIELD_DEFAULT_OPTIONS,
   MatFormField,
   MatFormFieldAppearance,
   MatFormFieldModule,
@@ -1218,6 +1218,77 @@ describe('MatInput with appearance', () => {
   }));
 });
 
+describe('MatFormField default options', () => {
+  it('should be legacy appearance if no default options provided', fakeAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        NoopAnimationsModule,
+        PlatformModule,
+      ],
+      declarations: [
+        MatInputWithAppearance,
+      ],
+    });
+
+    TestBed.compileComponents();
+
+    const fixture = TestBed.createComponent(MatInputWithAppearance);
+    fixture.detectChanges();
+    flush();
+    expect(fixture.componentInstance.formField.appearance).toBe('legacy');
+  }));
+
+  it('should be legacy appearance if empty default options provided', fakeAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        FormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        NoopAnimationsModule,
+        PlatformModule,
+      ],
+      declarations: [
+        MatInputWithAppearance,
+      ],
+      providers: [{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {}}],
+    });
+
+    TestBed.compileComponents();
+
+    const fixture = TestBed.createComponent(MatInputWithAppearance);
+    fixture.detectChanges();
+    flush();
+    expect(fixture.componentInstance.formField.appearance).toBe('legacy');
+  }));
+
+  it('should be custom default appearance if custom appearance specified in default options',
+      fakeAsync(() => {
+        TestBed.configureTestingModule({
+          imports: [
+            FormsModule,
+            MatFormFieldModule,
+            MatInputModule,
+            NoopAnimationsModule,
+            PlatformModule,
+          ],
+          declarations: [
+            MatInputWithAppearance,
+          ],
+          providers: [{provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'fill'}}],
+        });
+
+        TestBed.compileComponents();
+
+        const fixture = TestBed.createComponent(MatInputWithAppearance);
+        fixture.detectChanges();
+        flush();
+        expect(fixture.componentInstance.formField.appearance).toBe('fill');
+      }));
+});
+
 @Component({
   template: `
     <mat-form-field>