如果 textinput 为空，则更改边框颜色 angularjs

Question

如果有一个登录页面，如果字段为空，我想将文本输入的边框颜色更改为红色。到目前为止，我只完成了在文本输入下方显示文本，但没有更改边框颜色。我该怎么做？我目前正在使用 angularjs 和 ionic1.

这是我的 html 代码：

  <label class="item item-input" style="background-color: #000000; background: linear-gradient(to bottom, #2B292A, #000000); border-color: #494949;" id="login-input3">
     <img src="img/finalimages/username.png" style="width: 20px; margin-right: 10px;">
     <input type="text" name="userName" placeholder="用户名不允许出现符号" style="color: #ffffff;" ng-model="username" ng-required="true">
  </label>
  <p ng-show="login_form3.userName.$invalid && !login_form3.userName.$pristine" class="help-block">Your name is required.</p>

Answer 1

首先，设置样式 class 如：

.redBorder{border: 1px solid red;}

然后在您的 input 中添加一个 ng-class，例如：

ng-class="{'redBorder':login_form3.userName.$invalid && !login_form3.userName.$pristine}"

当满足显示文本 "Your name is required"

的相同条件时，这会将样式更改为 redBorder

如果 textinput 为空，则更改边框颜色 angularjs

change border color if textinput is empty angularjs

angularjs

ionic-framework

ionic-v1