我使用Angular与Bootstrap。这里是参考代码：
<form name="newUserForm" ng-submit="add()" class="" novalidate>
<input type="text" class="input" ng-model="newUser.uname" placeholder="Twitter" ng-pattern="/^@[A-Za-z0-9_]{1,15}$/" required></td>
<button type="submit" ng-disabled="newUserForm.$invalid" class="btn btn-add btn-primary">Add</button>
</form>
Bootstrap以输入形式存在无效字段的样式：invalid {….};当字段为空时，这些脚踢。现在我也有一些模式匹配通过Angular。当“：invalid”关闭，但是“.ng-invalid”开启时，这就需要我重新实现“.ng-invalid”类的bootstrap CSS类。
我看到两个选项，但有两个问题
>让Angular使用一些自定义类名，而不是“ng-valid”(我不知道如何做到这一点)。
>禁用html5验证(我认为这是什么“novalidate”属性在表单标签应该做，但不能得到它的工作原因)。
Angular-Bootstrap指令在那里不包括造型。
解决方法
使用Bootstrap的“error”类来设置样式。你可以写较少的代码。
<form name="myForm">
<div class="control-group" ng-class="{error: myForm.name.$invalid}">
<label>Name</label>
<input type="text" name="name" ng-model="project.name" required>
<span ng-show="myForm.name.$error.required" class="help-inline">
required</span>
</div>
</form>
编辑：正如其他答案和评论指出的 – 在Bootstrap 3中，类现在是“has-error”，而不是“error”。