CODEWITHSUNDEEP
javascriptangularjs
rahul goyal
rahul goyal

Reputation: 145

how can i can the border-color of input field on error or invalid using angular js ??

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

now how to apply angular js here for validation ang changing input field border-color?

Upvotes: 0

Views: 2036

Answers (2)

PAWAN RAJ Shakya
PAWAN RAJ Shakya

Reputation: 176

 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

Upvotes: 1

Kishor Sharma
Kishor Sharma

Reputation: 599

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.

Upvotes: 0

Related Questions