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

Question

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

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

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> 

Check this out.

  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> 

Source : enter link description here

Answer 2

you can use ngClass to add class to you element like:

<input type="text" id="name" name="name"  placeholder="your name"  autocomplete="on" ng-model="name"  ng-class="{'has-error': (!formName.name.$pristine && formName.name.$error.required)}" required>

formName.name.$pristine : will check if any changes to name input element is been made. formName.name.$error.required: will check error, here required is been checked.

in controller:

$scopr.submit = function () {
    if ($scope.formName.$valid) { 
      //do your work
    }
}

your need to create css class or If you are using twitter bootstrap use one from it.