必填字段 Angularjs 1.2 和 Bootstrap 3答案

【问题标题】：Required field Angularjs 1.2 and Bootstrap 3必填字段 Angularjs 1.2 和 Bootstrap 3
【发布时间】：2013-10-30 13:38:00
【问题描述】：

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

Plunker

编辑：将以下所有内容替换为以下 cmets 想法...我仍然想要一个不需要编写任何 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 替换了引导 css。我更喜欢简单地将 required 添加到元素中，而不必重写 css 来添加色调和动画。

【问题讨论】：

你做了一些需要的东西，但没有把它放在一个表格中，当然它是行不通的。
添加了一个表格，所以没有混淆，但没有没有帮助。看看 plunker 就明白我的意思了。

标签： angularjs twitter-bootstrap-3

【解决方案1】：

我同意其他两个答案，但想补充更多

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

首先，要修复您的 plunker，您应该：

正如 Mike 所说，使用 ng-app 引导您的应用
将您的输入输入到带有novalidate 的表单中
使用 ng-model 为您的输入提供一个模型，以便它可以失效（通过角度，使用类）
在引导之前移动 jQuery 脚本包含，因为它是引导的要求。

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

要应用样式，您可以使用直接 CSS 并将其应用到 ng-valid、ng-invalid、ng-invalid-required 等类，或者您可以使用来自 this comment 的 ng-class 建议来应用引导程序的类你需要他们

ng-class="{'has-error': formname.inputname.$invalid}"

如果您已命名输入并将其包装在控件中。

更新插件：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

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

【讨论】：

完美的正是我想要的。

【解决方案2】：

我建议你一步一步完成这个出色的工作：http://www.ng-newsletter.com/posts/validations.html

【讨论】：

【解决方案3】：

这里缺少一些东西。首先，为了使表单字段验证它需要一个唯一的名称：

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

其次，为了禁用常用的 HTML5 验证，您需要在表单中添加 novalidate 属性：

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

第三，也是最重要的，您的示例没有与之关联的应用程序或控制器，因此 Angular 完全忽略了它。那个你必须自己解决。

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

【讨论】：