Angular Materialのmat-form-fieldの外観の既定値を設定

Angular Material のフォームフィールド mat-form-field は、HTML タグの属性でスタイルを変更できるようになっています。

しかし、サイト内のコントロールの外観は固定であることが多いため、全てのコントロールタグに属性を付けていくのは大変であり、やっぱり変えたいとなった場合はさらに大変です。

それで今回は個人的に規定値から変更することの多い、外観設定「appearance」と、キャプション表示方法「floatLabel」の既定値を設定してみます。

appearance と floatLabel の挙動を確認

とりあえず以下のコードを編集し、結果がどのように変わるか試してみてください。

appearance と floatLabel の既定値を設定

appearance や floatLabel は HTML タグで指定されるため、CSS で一括指定ができません。それで例えば、appearance の既定値を outline、floatLabel の既定値を always（タイトルを常に上に表示）に変えたい場合、各種モジュールをインポートしている箇所（上の例だと main.ts）に、以下のコードを追加します。

@NgModule({
  ...
  providers: [
    { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {
      appearance: 'outline',
      floatLabel: 'always', } },
  ]
  ...
})

すると以下のように、スタイル未指定フィールドの既定の動作を変更できます。