个人中心
gpt4 book ai didi

angularjs - 必填字段 Angularjs 1.2 和 Bootstrap 3

转载 作者：行者123 更新时间：2023-12-02 23:12:44 25 4
gpt4 key购买 nike

随着 angularjs 和 bootstrap 3 的更改，我无法创建所需的表单字段，其中仅通过将所需的参数添加到输入字段，项目将被红色突出显示包围。这是plunker我如何在我的系统上设置它并期望它能够工作。我似乎在 Bootstrap 网站上找不到任何有关所需的文档，因此如果有人能找到该文档，那将非常有帮助。

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。我更愿意简单地将 required 添加到元素中，而不必重写 css 来添加色调和动画。

最佳答案

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

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

首先，要修复你的问题，你应该:

  • 按照 Mike 的说法使用 ng-app 启动您的应用
  • 使用 novalidate 将您的输入放入表单
  • 使用 ng-model 为您的输入提供一个模型，以便它可以失效(通过 Angular ，使用类)
  • 将 jQuery 脚本移至 Bootstrap 之前，因为这是 Bootstrap 的要求。

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

要应用样式，您可以直接使用 CSS 并将其应用于 ng-valid、ng-invalid、ng-invalid-required code> 等类，或者您可以使用 this comment 中的 ng-class 建议在需要时应用 Bootstrap 的类

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

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

关于angularjs - 必填字段 Angularjs 1.2 和 Bootstrap 3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19505073/

25 4 0
文章推荐： mercurial - 如何在 Mercurial 中重新手动 merge 一个文件？
文章推荐： powershell - 了解PowerShell运算符+和
文章推荐： powershell - 如何批量启用任务
文章推荐： angularjs - Angular ui 路由器的动态参数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com