时间戳

首页 > 解决方案 > angularJS在错误时更改表单输入边框颜色

css - angularJS在错误时更改表单输入边框颜色

问题描述

这是我第一次使用 bootstrap 和 angularJS，我创建了一个登录表单。如果我的用户名长度不正确，我会在输入下显示错误。但是，如果显示错误并且我不知道该怎么做，我也想将输入边框颜色更改为红色。如果我可以为单个输入执行此操作，我可以在任何地方使用它

我的用户名输入代码：

      <form name= "logForm">
        <div class="form-group">
          <label for="username">Username:</label>
          <input type="username" class="form-control" id="uname" placeholder="Enter username" name="uname" 
                 ng-minlength= "10" ng-maxlength = "15" ng-model = "uname" required/>

          <span style= "color: #4CAF50" ng-show = "logForm.uname.$valid">Valid</span>
          <span style= "color:red" ng-show= "logForm.uname.$touched && logForm.uname.$error.minlength">
            Min length is 10 
          </span>
          <span style= "color:red" ng-show= "logForm.uname.$touched && logForm.uname.$error.maxlength">
            Max length is 15 
          </span>     

        </div>
     </form>

所以我需要找到一种方法，只要出现错误，我的输入边框是红色的，当我有有效输入时，边框必须是绿色的。

标签： cssangularjsformstwitter-bootstrap

解决方案

您可以使用ng-class. 有关此指令的更多信息，请参阅文档：https ://docs.angularjs.org/api/ng/directive/ngClass

在您的情况下，您想在错误可见时添加一些类来形成。您所要做的就是ng-class="{ 'is-invalid': logForm.uname.$touched && logForm.uname.$error.minlength }"在输入中添加类似的内容。（请注意，该类is-invalid是官方引导输入错误类，但在不同版本中可能会有所不同：https ://getbootstrap.com/docs/4.0/components/forms ）

<input type="username"
    ng-class="{ 'is-invalid': logForm.uname.$touched && logForm.uname.$error.minlength }"
    class="form-control"
    id="uname"
    placeholder="Enter username"
    name="uname"
    ng-minlength="10"
    ng-maxlength="15"
    ng-model="uname"
    required
/>

如果您只想添加一些样式而不是类，可以使用ng-style指令： https ://docs.angularjs.org/api/ng/directive/ngStyle

推荐阅读