0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-11-07

元記事: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', } },
  ]
  ...
})

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?