Question

随着angularjs和bootstrap 3的更改，我无法创建一个表单字段，只需将所需参数添加到输入字段，该项目将被红色突出显示。这是一个plunker我如何在我的系统上设置它并期望它工作。我似乎无法在bootstraps网站上找到任何关于必需的文档，这样如果有人能找到它会真的有帮助。

Plunker

编辑：将以下所有内容替换为以下评论提示...我仍然想要一个解决方案，我不需要编写任何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来添加色调和动画。

Answer 1

我同意其他两个答案，但想添加更多

我认为你的主要问题是Bootstrap 3删除了基于:invalid和相关伪类的样式（请参阅here了解原因）。这是bootstrap 2.x中的红色轮廓来自的地方。

首先，为了修复你的傻瓜你应该：

使用ng-app引导您的应用，如Mike所说
将您的输入放在包含novalidate
使用ng-model为您的输入提供模型，以便它可以无效（通过角度，使用类）
移动jQuery脚本包括在bootstrap之前，因为它是bootstrap的要求。

现在你有一个plunker，其中应用了正确的类来指示输入有效性。你还没有这些样式，但它们不依赖于浏览器的HTML5表单验证，因此可以在任何角度支持中使用。

要应用样式，您可以使用直接CSS并将其应用于ng-valid，ng-invalid，ng-invalid-required等类，也可以使用ng-class建议this comment在需要时应用bootstrap的类

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

*除非电子邮件看起来像电子邮件，否则电子邮件将无效

Answer 2

这里有一些遗漏的东西。首先，为了使表单字段有效，它需要一个唯一的名称：

<input class="form-control" type="text" name="test" required/>

其次，要禁用库存HTML5验证，您需要在表单中添加novalidate属性：

<form class="form-horizontal" name="myForm" role="form" novalidate>

第三，最重要的是，你的例子没有与之关联的app或控制器，所以angular完全忽略了它。那个你必须自己解决的问题。

在此处阅读有关角形式的更多信息：http://docs.angularjs.org/guide/forms

Answer 3

我建议您逐步完成这项工作：http://www.ng-newsletter.com/posts/validations.html

必填字段Angularjs 1.2和Bootstrap 3

3 个答案: