<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>
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.