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


条件付きの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のクラスが追加される -->