twitter-bootstrap – Reconcile Angular.js和Bootstrap表单验证

发布时间：2020-12-17 23:42:19 所属栏目：安全来源：网络整理

导读：我使用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

我使用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”。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!