Formlarda anlık doğruluk kontrolu sağlar.
İnput elementi için geçerli doğrulama
direktifleri:
- required
- Ng-minlength
- ng-maxlength
- Ng-pattern
- Ng-change
input_required
<html>
<script src =
"https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="">
<form
name="form">
<input name="isim" ng-model="isim" required>
</form>
<p>İsim
alanındaki veri girişi şartı sağladımı:</p>
<h1>{{form.isim.$valid}}</h1>
</body>
</html>
input_ng-minlength
<html>
<script src =
"https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="">
<form
name="myForm">
<input
name="isim" ng-model="isim" ng-minlength="5">
<h1
ng-if="!myForm.isim.$valid">İsim
Cok
kısa</h1>
</form>
</body>
</html>
input_ng-maxlength
<!DOCTYPE
html>
<html>
<script src =
"https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="">
<form
name="myForm">
<input
name="isim" ng-model="isim" ng-maxlength="5">
<h1
ng-if="!myForm.isim.$valid">İsim
Cok
uzun</h1>
</form>
</body>
</html>
input_ng-pattern
<html>
<script src =
"https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="">
<form
name="form">
<input type="text"
ng-model="sayi"
name="sayi"
ng-pattern="/^[0-9]{1,5}$/" required >
<span ng-show="form.sayi.$error.pattern">Sadece Sayi</span>
</form>
</body>
</html>
input_$error
<form name="form">
<input type="text" ng-model="sayi" name="sayi" ng-pattern="/^[0-9]{1,5}$/" ng-maxlength="4" required>
<span ng-show="form.sayi.$error.pattern">Sadece Sayi</span>
<span ng-show="form.sayi.$error.required">zorunlu alan</span>
<span ng-show="form.sayi.$error.maxlength">maximum rakam girtebilirsin</span>
</form>
input_ng-pattern(email)
<html>
<script src =
"https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="">
<form
name="form">
<input type="text"
ng-model="emil"
name="emil" ng-pattern="/^[a-z]+[a-z0-9._]+@[a-z]+\.[a-z.]{2,5}$/">
<span ng-show="form.emil.$error.pattern">Email
Formatında girin</span>
</form>
</body>
</html>
input_ng-change
<html>
<script src =
"https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="myApp">
<div
ng-controller="myCtrl">
<p>Bişey
gir ,ne kadar giriş yaptıgını saycam</p>
<input
type="text"
ng-keypress="say()" ng-model="giris"
/>
<p>{{count}}
kadar değişti</p>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope',
function($scope) {
$scope.count = 0;
$scope.say = function() {
$scope.count++;
};
}]);
</script>
</body>
</html>
Hiç yorum yok:
Yorum Gönder