javascript - 我如何使用angular js在错误或无效的输入字段的边框颜色？

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

现在如何在这里应用有角度的js来验证ang更改输入字段的border-color？

最佳答案

 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

关于javascript - 我如何使用angular js在错误或无效的输入字段的边框颜色？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31481797/