我使用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”。
原文地址:https://www.jb51.cc/bootstrap/234891.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。