首页 文章

AngularJS和Bootstrap：提交时无效输入字段上的红色边框

提问于
浏览 次
6

我使用AngularJS和Bootstrap实现了这个基本形式：http://jsfiddle.net/dennismadsen/0stwd03k/

HTML

<div ng-controller="MyCtrl">
    <form class="well" name="formTest" ng-submit="save()">
        <div class="form-group">
            <label for="name">Name*</label>
            <input type="name" class="form-control" id="name" placeholder="Enter name" required />
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>

JavaScript

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {

    $scope.save = function () {
    };
}

Result

enter image description here

名称输入字段是必需的 . 当我单击提交按钮时，如果输入字段无效，我需要输入字段为红色边框 . 如何才能做到这一点？

或者，如果我没有对输入字段进行聚焦并且它仍然无效，那么在那个时间显示红色corder将是很好的，而不是等待表单提交 .

angularjs twitter-bootstrap

3 回答

  • 13

    首先你错过了将 ng-model='name' 添加到输入字段，然后唯一的表单在点击提交时将变为无效，否则表格将始终有效，因为它认为其中没有字段 .

    然后我在 submit 点击按钮添加 submitted 类，然后把像 .submitted 这样的边框css作为父级， .ng-invalid 将是子级，所以我们可以将样式放在 .submitted .ng-invalid 上

    HTML

    <div ng-controller="MyCtrl">
    <form class="well" name="formTest" ng-class="{'submitted': submitted}" ng-submit="save()" >
        <div class="form-group">
            <label for="name">Name*</label>
            <input type="name" class="form-control" id="name" placeholder="Enter name" ng-model="name" required />
        </div>{{submitted}}
        <button type="submit" class="btn btn-default" ng-click="submitted= true;">Submit</button>
    </form>
</div>

    CSS

    .submitted .ng-invalid{
    border: 1px solid red;
}

    Working Fiddle

    希望这可以帮助你，谢谢 .

    回复于
  • 3

    Twitter Bootstrap有一个 has-error 类，所以我会将它与 ng-class 一起用于表单组，然后使用带有 label 和 label-danger 类的标签来衡量：

    <div class="form-group" ng-class="{'has-error': errors.Name }">
    <label for="name">Name*</label>
    <input type="name" class="form-control" id="name" placeholder="Enter name" required />
    <span class="label label-danger" ng-if="errors.Name">{{errors.Name}}</span>
</div>

    然后在您的控制器中，有一个 errors 对象，并在名称无效时将其 Name 属性设置为字符串 .

    回复于
  • 15

    基本上你需要角度来接管验证，所以添加 novalidate 来形成 . 同时将 ng-class 添加到 input 字段以确定是否添加错误css

    <form name="myForm" novalidate ng-submit="test()">
    <input type="text" name="user" ng-model="user" required ng-class="myForm.user.$invalid && myForm.user.$dirty ? 'error' : ''">
    <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
        <span ng-show="myForm.user.$error.required">Username is required.    </span>
</span>

<p>
    <input type="submit"
    ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
    myForm.email.$dirty && myForm.email.$invalid">
</p>
</form>

    祝好运..

    回复于

相关问题