2

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

普朗克

编辑：用下面的评论想法替换以下所有内容......我仍然想要一个不需要编写任何 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 来添加色调和动画。

4

3 回答 3

5

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

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

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

  • ng-app正如迈克所说，引导您的应用程序
  • 将您的输入放在一个表格中novalidate
  • 为您的输入提供一个模型，ng-model以便它可以失效（通过角度，使用类）
  • 将 jQuery 脚本包含在引导之前，因为它是引导的要求。

现在你有一个 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

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

于 2013-10-21T23:03:12.983 回答
1

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

<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

于 2013-10-21T22:25:23.570 回答
1

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

于 2013-10-21T22:26:07.887 回答