元記事: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', } },
]
...
})
すると以下のように、スタイル未指定フィールドの既定の動作を変更できます。