0

More than 3 years have passed since last update.

@adda_abw(おまえうまそうだな)

【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のクラスが追加される -->

0

Register as a new user and use Qiita more conveniently

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

0