Ty *_*son 2 angularjs twitter-bootstrap-3
随着angularjs和bootstrap 3的更改,我无法创建一个表单字段,只需将所需参数添加到输入字段,该项目将被红色突出显示.这是一个关于如何在我的系统上设置它并期望它工作的plunker.我似乎无法在bootstraps网站上找到关于所需的任何文档,这样如果有人能找到它会真的有帮助.
编辑:用以下评论意见替换以下所有内容......我仍然想要一个解决方案,我不需要编写任何CSS并使用Bootstrap 3.
我的表单字段如下所示:
<body ng-app>
<div ng-controller="Controller" class="container">
<form novalidate class="simple-form" name="myForm">
<div class="form-group col-sm-4">
Name: <input type="text" ng-model="name" name="name" class="form-control" required/>
E-mail: <input type="email" ng-model="email" name="email" class="form-control" required/>
<small class="error"
ng-show="myForm.email.$error.required">
Your name is required.
</small>
</div>
</form>
</div>
</body>
Script.js看起来像这样:
function Controller($scope) {
$scope.name = "Test";
$scope.email = "";
}
Style.css看起来像这样:
input.ng-invalid {
border: 1px solid red;
}
虽然这有效,但它用上面的css替换了bootstrap css.我更喜欢简单地添加一个元素,而不必重写css来添加色调和动画.
我同意其他两个答案,但想补充更多
我认为你的主要问题是Bootstrap 3基于:invalid相关的伪类删除了样式(请参阅此处了解原因).这是bootstrap 2.x中的红色轮廓来自的地方.
首先,为了修复你的掠夺者,你应该:
ng-app正如Mike所说,引导您的应用程序novalidateng-model以便它可以无效(通过角度,使用类)现在你有了一个plunker,其中应用了正确的类来指示输入有效性.您还没有这些样式,但它们不依赖于浏览器的HTML5表单验证,因此可以在任何角度支持中使用.
要应用样式,您可以使用CSS直并将其应用到了ng-valid,ng-invalid,ng-invalid-required等类,或者您可以使用ng-class建议从本评论时,你需要他们运用引导的课程
ng-class="{'has-error': formname.inputname.$invalid}"
如果您已将输入命名并将其包装在控件中.
更新了plunker:http://plnkr.co/edit/mE3dkG？p = preview
编辑
我也为此做了一个指示.它可能有点过分,但是这应该适用于任何有form-group类的地方并添加ng-form到同一个元素
.directive('formGroup', function(){
return {
restrict: 'C',
require: '?form',
link: function(scope, element, attrs, formController){
if(!formController)
return;
scope.$watch(function(){
return formController.$valid;
}, function(valid) {
if(valid)
element.removeClass('has-error');
else
element.addClass('has-error');
});
}
};
});
还有另一个玩家:http://plnkr.co/edit/UQjRrA？p = preview
*除非电子邮件看起来像电子邮件,否则该电子邮件将无效
| 归档时间： |
|
| 查看次数： |
7854 次 |
| 最近记录： |