More than 3 years have passed since last update.

【angular】条件付きcssクラスの適用

Last updated at 2020-03-15Posted at 2020-03-15

#条件付きのcssクラス
###書き方

[class.クラス名]="条件"

###使用例
バリデータが成功したか失敗したかによってクラスを変更できる

html

<input formControlName="formOne"
[class.input-invalid]="formOne.invalid"
[class.input-valid]="formOne.valid">
<!-- formOneのバリデータが失敗したらinput-invalidのクラスが追加、
成功したらinput-validのクラスが追加される -->
+
<input formControlName="formTwo"
[class.input-invalid]="formTwo.invalid"
[class.input-valid]="formTwo.valid">
<!-- formTwoのバリデータが失敗したらinput-invalidのクラスが追加、
成功したらinput-validのクラスが追加される -->

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up