当我的模型状态无效时，如何将CSS类添加到输入元素？

当模型状态无效时，可以通过以下步骤将CSS类添加到输入元素：

1. 首先，确保你已经在HTML中定义了输入元素，并且给它一个唯一的ID或类名，例如：

<input type="text" id="myInput" />

1. 在你的CSS文件中定义一个表示无效状态的类，例如：

.invalid {
  border-color: red;
}

1. 在你的JavaScript代码中，通过监听模型状态的变化来判断何时将无效类添加到输入元素。假设你使用的是Angular框架，可以使用ngClass指令来实现：

<input type="text" id="myInput" [ngClass]="{'invalid': myModel.invalid}" />

在上面的代码中，myModel是你的模型对象，invalid是模型状态的属性。当myModel.invalid为true时，将会添加invalid类到输入元素。

1. 如果你不使用任何框架，可以使用纯JavaScript来实现。在你的JavaScript代码中，获取输入元素的引用，并根据模型状态来添加或移除无效类。例如：

var myInput = document.getElementById("myInput");
if (myModel.invalid) {
  myInput.classList.add("invalid");
} else {
  myInput.classList.remove("invalid");
}

在上面的代码中，myModel是你的模型对象，invalid是模型状态的属性。当myModel.invalid为true时，将会添加invalid类到输入元素；否则，将会移除invalid类。

这样，当模型状态无效时，输入元素就会自动添加相应的CSS类，从而改变其外观或样式。