04-02-Validation.html
Dosyayı İndir
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('myCtrl', function($scope) {
$scope.data = {
necessary:'',
username:'',
email:'',
number:20
};
$scope.submitData=function(){
alert("Gönderiliyor!");
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1> Gelişmiş Form</h1>
<form name="myform" ng-submit="submitData()" >
Zorunlu Alan :
<input name="mynecessary" type="text" ng-model="data.necessary" required/>
<span style="color:red" ng-show="myform.mynecessary.$touched && myform.mynecessary.$error.required">
Bu alan zorunlu.
</span>
<br/><br/>
Boy Alanı :
<input name="myusername" type="text" ng-model="data.username" ng-minlength="2" ng-maxlength="6" />
<span style="color:red" ng-show="myform.myusername.$error.minlength || myform.myusername.$error.maxlength ">
Boy en az 2 en çok 6 olmalı.
</span>
<br/><br/>
Eposta Alanı:
<input type="email" name="myemail" ng-model="email" required>
<span style="color:red" ng-show="myform.myemail.$dirty && myform.myemail.$invalid">
<span ng-show="myform.myemail.$error.email">Geçersiz eposta.</span>
</span>
<br/><br/>
Sayı Alanı :
<input name="mynumber" type="number" ng-model="data.number" min="18" max="48" required/>
<span style="color:red" ng-show="myform.mynumber.$dirty && myform.mynumber.$invalid">
Sayı 18 ile 48 arasında olmalı.
</span>
<br/><br/>
<input type="submit" value="Gir"/><br/>
</form>
</body>
</html>
Dosyayı İndir 