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

发布时间：2020-12-17 08:52:56 所属栏目：安全来源：网络整理

导读：我使用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="n

我使用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 () {
    };
}

结果

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

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

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

然后我将提交的类添加到提交单击按钮,然后将边框css添加为.submitted将为parent而.ng-invalid将为child,因此我们可以将样式设置为.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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!