<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Angular input Direktifleri</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
  

  
</head>
<body ng-app="inputOrnek">
  <script>
   angular.module('inputOrnek', [])
     .controller('ornekController', ['$scope', function($scope) {
       $scope.kullanici = {adi: 'ahmet', soyadi: 'çağlayan'};
     }]);
</script>
<div ng-controller="ornekController">
  <form name="myForm">
    <label>
       Kullanıcı adi:
       <input type="text" name="kullaniciIsmi" ng-model="kullanici.adi" required>
    </label>
    <div role="alert">
      <span class="hata" ng-show="myForm.kullaniciIsmi.$error.required">
       Gerekli!</span>
    </div>
    <label>
       Soyisim:
       <input type="text" name="soyIsim" ng-model="kullanici.soyadi"
       ng-minlength="3" ng-maxlength="10">
    </label>
    <div role="alert">
      <span class="hata" ng-show="myForm.soyIsim.$error.minlength">
        Çok kısa!</span>
      <span class="hata" ng-show="myForm.soyIsim.$error.maxlength">
        Çok uzun!</span>
    </div>
  </form>
  <hr>
  <tt>user = {{user}}</tt><br/>
  <tt>myForm.kullaniciIsmi.$valid = {{myForm.kullaniciIsmi.$valid}}</tt><br/>
  <tt>myForm.kullaniciIsmi.$error = {{myForm.kullaniciIsmi.$error}}</tt><br/>
  <tt>myForm.soyIsim.$valid = {{myForm.soyIsim.$valid}}</tt><br/>
  <tt>myForm.soyIsim.$error = {{myForm.soyIsim.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
  <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br/>
  <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br/>
</div>
</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.