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

2423 ワード
Angular MaterialDesign angularMaterial Angular テキストリンク

元記事：genkitech.net

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', } },
  ]
  ...
})

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

画像をクリックして編集できます