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

Question

这是我第一次使用 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>

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

Answer 1

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

在您的情况下，您想添加一些 class 以在错误可见时形成。您所要做的就是在输入中添加 ng-class="{ 'is-invalid': logForm.uname.$touched && logForm.uname.$error.minlength }" 之类的内容。（请注意classis-invalid是官方bootstrap输入错误class，但不同版本可能会有所不同：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
/>

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

Answer 2

这可以使用 ng-class 或 ng-style 来完成：使用 ng-style 的解决方案：

<input type="username"
    class="form-control"
    ng-style="!(!(uname.length < 10) && !(uname.length > 15)) && {"border" : "1px solid red"} "
    id="uname"
    placeholder="Enter username"
    name="uname"
    ng-minlength="10"
    ng-maxlength="15"
    ng-model="uname"
    required
/>

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

angularJS change form input border color on error

css

forms

twitter-bootstrap

angularjs