调和Angular.js和Bootstrap表单验证样式

一尘不染

调和Angular.js和Bootstrap表单验证样式

angularjs

我在Bootstrap中使用Angular。这是供参考的代码：

<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具有以下形式的无效字段样式input:invalid {.... }：这些字段在字段为空时启动。现在我也通过Angular进行了一些模式匹配。当“：invalid”关闭但“ .ng-
invalid”打开时，这会产生奇怪的情况，这将需要我为“ .ng-invalid”类重新实现引导CSS类。

我看到两个选择，但都遇到麻烦

使Angular使用一些自定义类名代替“ ng-valid”（我不知道该怎么做）。
禁用html5验证（我认为那是form标记中的“ novalidate”属性应该执行的操作，但是由于某种原因而无法使它起作用）。

此处的Angular-Bootstrap指令不涵盖样式。

阅读 230

2020-07-04

共1个答案

一尘不染

使用Bootstrap的“错误”类进行样式设置。您可以编写更少的代码。

<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中，该类现在是“有错误”，而不是“错误”。

2020-07-04