Created
October 23, 2017 15:13
-
-
Save gmittica/1d3a860c8d71700a308c641f2c727f57 to your computer and use it in GitHub Desktop.
Lesson // source http://jsbin.com/tebozuh
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="https://code.jquery.com/jquery.min.js"></script> | |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width"> | |
<title>Lesson</title> | |
<style id="jsbin-css"> | |
.container { | |
margin-top:45px; | |
} | |
input.ng-valid { | |
color: green; | |
} | |
input.ng-invalid { | |
color: red; | |
} | |
</style> | |
</head> | |
<body ng-app="myApp"> | |
<div class="container" ng-controller="myCtrl"> | |
<form name="myForm" class="form" ng-submit="sendForm()" novalidate > | |
<div class="form-group"> | |
<input type="text" validator1 name="title" ng-model="form.title" required="required" class="form-control" placeholder="Write a title with 'academy'" > | |
</div> | |
<div class="form-group"> | |
<input type="email" name="email" ng-model="form.email" required="required" class="form-control" placeholder="Write an email" > | |
</div> | |
<div class="form-group"> | |
<button type="submit" ng-disabled="myForm.$invalid" class="btn btn-info" >Save</button> | |
</div> | |
<div class="well" > | |
<span ng-show="myForm.title.$error.validator1">Title must contain "academy"</span> | |
<span ng-show="myForm.email.$error.email">Add a valid address</span> | |
</div> | |
</form> | |
<div class="well"> | |
{{ form | json }} | |
</div> | |
</div> | |
<script id="jsbin-javascript"> | |
angular.module("myApp", []) | |
.controller("myCtrl", ['$scope', function($scope) { | |
$scope.form = { }; | |
$scope.sendForm = function() { | |
// do something with $scope.form | |
} | |
}]) | |
.directive('validator1', function() { | |
return { | |
require: 'ngModel', | |
link: function(scope, el, attrs, ctrl) { | |
ctrl.$validators.validator1 = function(modelValue, viewValue) { | |
if(ctrl.$isEmpty(modelValue)) { | |
return true; | |
} | |
if(viewValue.search("academy") > -1) { | |
return true; | |
} | |
return false; | |
} | |
} | |
} | |
}) | |
; | |
</script> | |
<script id="jsbin-source-css" type="text/css">.container { | |
margin-top:45px; | |
} | |
input.ng-valid { | |
color: green; | |
} | |
input.ng-invalid { | |
color: red; | |
}</script> | |
<script id="jsbin-source-javascript" type="text/javascript">angular.module("myApp", []) | |
.controller("myCtrl", ['$scope', function($scope) { | |
$scope.form = { }; | |
$scope.sendForm = function() { | |
// do something with $scope.form | |
} | |
}]) | |
.directive('validator1', function() { | |
return { | |
require: 'ngModel', | |
link: function(scope, el, attrs, ctrl) { | |
ctrl.$validators.validator1 = function(modelValue, viewValue) { | |
if(ctrl.$isEmpty(modelValue)) { | |
return true; | |
} | |
if(viewValue.search("academy") > -1) { | |
return true; | |
} | |
return false; | |
} | |
} | |
} | |
}) | |
;</script></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.container { | |
margin-top:45px; | |
} | |
input.ng-valid { | |
color: green; | |
} | |
input.ng-invalid { | |
color: red; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module("myApp", []) | |
.controller("myCtrl", ['$scope', function($scope) { | |
$scope.form = { }; | |
$scope.sendForm = function() { | |
// do something with $scope.form | |
} | |
}]) | |
.directive('validator1', function() { | |
return { | |
require: 'ngModel', | |
link: function(scope, el, attrs, ctrl) { | |
ctrl.$validators.validator1 = function(modelValue, viewValue) { | |
if(ctrl.$isEmpty(modelValue)) { | |
return true; | |
} | |
if(viewValue.search("academy") > -1) { | |
return true; | |
} | |
return false; | |
} | |
} | |
} | |
}) | |
; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment