11

Working actually on form fields, I'm only using an outline appearance for my inputs (see more here).

Not wanting to copy appearance=outline everywhere on each form, I wanted to know if there was a way to set the standard value of the appearance on outline.

I've found out in the API that there is a MAT_FORM_FIELD_DEFAULT_OPTIONS (link). But I don't know how to use it and didn't found much documentation on it.

Or maybe should I just stick with a basic appearance="{{defaultAppearance}}" on each form field and set a global variable, but I still have to duplicate this code everywhere (but it still allows me change the style easily whenever I want to)

Joël-Etienne
  • 386
  • 1
  • 12

1 Answers1

10

Got the answer here.

add this:

{ provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'outline' }}

in the providers of @ngModule.

Joël-Etienne
  • 386
  • 1
  • 12
  • 1
    Note: I found that you have to restart your locally running app to see these changes, they don't come through with hot reload. – Ollie Nov 19 '21 at 02:17
  • I added this to my AppModule class and also had to put this at the top of the file: import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field'; – John Gilmer Nov 04 '22 at 22:34