change border color if textinput is empty angularjs

Question

if have a login page where i want to change the border color of the textinputs to red if the field is empty. so far i have only accomplished showing a text below the textinput but not change the border color. how do i go about it? i'm currently using angularjs and ionic1.

here's my html code:

  <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

First, set a style class like:

.redBorder{border: 1px solid red;}

Then add an ng-class to your input like:

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

This will change the style to redBorder when the same condition is met that displays the text "Your name is required"