diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts index 5e804eda745..4c2d5e4e342 100644 --- a/src/lib/form-field/form-field.ts +++ b/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('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 : {}; diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts index fea0b126b84..101b4509378 100644 --- a/src/lib/input/input.spec.ts +++ b/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: `