javascript - 我怎样才能使用 Angular JS 在错误或无效时输入字段的边框颜色？

Question

     <input type="text" id="name" name="name"  placeholder="your name"  autocomplete="on" ng-model="name"  required> 

现在如何在此处应用 Angular js 进行验证并更改输入字段边框颜色？

Answer 1

 angular.module('formExample', [])
   .controller('FormController', ['$scope',
     function($scope) {
       $scope.userType = 'guest';
     }
   ]);

.my-form {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
  background: transparent;
}
.my-form.ng-invalid {
  background: white;
}
.my-input.ng-invalid {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app="formExample">
  <form name="myForm" ng-controller="FormController" class="my-form">
    userType:
    <input name="input" ng-model="userType" required class="my-input">
    <span class="error" ng-show="myForm.input.$error.required">Required!</span>
    <br>
    <code>userType = {{userType}}</code>
    <br>
    <code>myForm.input.$valid = {{myForm.input.$valid}}</code>
    <br>
    <code>myForm.input.$error = {{myForm.input.$error}}</code>
    <br>
    <code>myForm.$valid = {{myForm.$valid}}</code>
    <br>
    <code>myForm.$error.required = {{!!myForm.$error.required}}</code>
    <br>
  </form>
</div>

看看这个。

  angular.module('formExample', [])
    .controller('FormController', ['$scope',
      function($scope) {
        $scope.userType = 'guest';
      }
    ]);

.my-form {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
  background: transparent;
}
.my-form.ng-invalid {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<div ng-app="formExample">
  <form name="myForm" ng-controller="FormController" class="my-form">
    userType:
    <input name="input" ng-model="userType" required>
    <span class="error" ng-show="myForm.input.$error.required">Required!</span>
    <br>
    <code>userType = {{userType}}</code>
    <br>
    <code>myForm.input.$valid = {{myForm.input.$valid}}</code>
    <br>
    <code>myForm.input.$error = {{myForm.input.$error}}</code>
    <br>
    <code>myForm.$valid = {{myForm.$valid}}</code>
    <br>
    <code>myForm.$error.required = {{!!myForm.$error.required}}</code>
    <br>
  </form>
</div>

来源:enter link description here