var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$filter) {
$scope.model = { name: 'World' };
$scope.date12 = "";
$scope.convertStringToDate = function(){
$scope.convertedDateObject = $filter('date')(new Date($scope.date12), "yyyy-MM-dd");
}
$scope.passwordString="";
$scope.changePasswordWithStar = function(){
$scope.stringConvertedtoStar= $scope.passwordString.replace(/./gi, '*');
}
});
app.directive('myDirective', function($filter) {
return {
restrict: 'AE',
require: "ngModel",
scope: {
myDirectiveVar: '=',
},
template: '<input type="text" ng-model="myDirectiveVar" ng-keyup="addSlashes()" ng-mouseleave="validation()" >'
+'{{errorMesg}}',
controller:function($scope,$element, $attrs){
// $scope.datePattern=/^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/i;
},
link: function($scope, elem, attr, ctrl) {
console.log("This is dataField with auto slash...");
$scope.reg1 = new RegExp(/^\d{2}$/);
$scope.reg2= new RegExp(/^\d{2}\/\d{2}$/);
$scope.addSlashes = function() {
if ( $scope.reg1.test($scope.myDirectiveVar)) {
$scope.myDirectiveVar = $scope.myDirectiveVar + '/';
} else if ($scope.reg2.test($scope.myDirectiveVar)) {
$scope.myDirectiveVar = $scope.myDirectiveVar + '/';
}
}
$scope.validation=function(){
//console.log(aForm)
$scope.convertedDateObject = $filter('date')(new Date($scope.myDirectiveVar), "yyyy-MM-dd");
console.log("ddsfdsf "+$scope.convertedDateObject);
if($scope.convertedDateObject != 'Invalid Date'){
$scope.errorMesg = "Date is valid";
ctrl.$setValidity("myDirective", true);
}else{
$scope.errorMesg = "Date is in in in valid";
ctrl.$setValidity("myDirective", false);
}
}
}
};
});
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css">
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
<script src="date.directive.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Hope This will help you. All the best!!!!</h1>
#1 Your first task <br/><br/>
<form name="myForm">
<table>
<tr><td>
<!-- Date text field with slash directive <my-directive my-directive-var="date12" ng-model="date12" required></my-directive>-->
Date text field <input type="text" ng-model ="date12" my-Directive12 required>
</td></tr>
<tr><td>
This your controller scope value <input type="text" ng-model="date12">
</td>
</tr>
<tr><td><button ng-click="convertStringToDate()">convert string to date Object</button></td>
<td>{{convertedDateObject}}</td>
</tr>
</table><br/><br/><br/>
#2 Your Second task<br/><br/>
<table>
<tr>
<td>
<label>Replace All Charector to Star</label>
<input type="text" ng-model="passwordString" ng-keyup="changePasswordWithStar()">
</td>
<td><lable> {{stringConvertedtoStar}}</lable></td>
</tr>
</table>
</form>
</body>
</html>
.ng-invalid {
background-color: #FA787E;
}
app.directive('myDirective12', function($compile) {
return {
restrict: 'A',
require: 'ngModel',
// replace: false,
// scope:{testModel: '=ngModel' },
/*template: '<input id="myDirective" name="dateText" type="text" icce-required class="col-md-12" ng-model="myDirectiveVar"'+
'ng-keyup="addSlashes()" >',*/
controller:function($scope,$element, $attrs){
},
link: function($scope, element, attrs, ctrl, ngModel) {
var errorMsg = "This is not a valid Date. Please enter again";
attrs.$set("maxlength", 10);
if (attrs.icceError != 'undefined') {
errorMsg = attrs.icceError;
}
var currentState = true;
var isValid = false;
var field = attrs.ngModel;
var id = attrs.id;
var yourFieldName = element.attr('name');
console.log("on load "+ $scope.form);
var icceErrorlist = attrs.icceErrorList;
$scope.reg1 = new RegExp(/^\d{2}$/);
$scope.reg2= new RegExp(/^\d{2}\/\d{2}$/);
element.bind('keyup', function(event) {
$scope.myDirectiveVar = ctrl.$viewValue;
if(event.keyCode != 8){
if ($scope.reg1.test($scope.myDirectiveVar)) {
$scope.myDirectiveVar = $scope.myDirectiveVar + "/";
} else if ($scope.reg2.test($scope.myDirectiveVar)) {
$scope.myDirectiveVar= $scope.myDirectiveVar + "/";
}
ctrl.$setViewValue($scope.myDirectiveVar);
ctrl.$render();
$scope.validation();
}
});
$scope.validation=function(){
console.log('This is validation method');
$scope.convertedDateObject = new Date($scope.myDirectiveVar);
console.log("dsfsdfsd"+$scope.convertedDateObject);
if( $scope.convertedDateObject != 'Invalid Date'){
isValid = true;
ctrl.$setValidity('myDirective', true);
}else{
isValid = false;
ctrl.$setValidity('myDirective', false);
}
}
//copying from phonevalidation.directive.js
var isDateValid = function(value, isValid, isSubmitted) {
var isHidden = false;
if(attrs.ngHide != undefined && $scope.$eval(attrs.ngHide)){
isHidden = true;
}
if(isSubmitted && value != undefined && value != "" && !isHidden) {
if(isValid) {
ctrl.$setValidity('myDirective', true);
removeErrorMessage($scope.$eval(attrs.icceErrorList),
field, $scope.$eval("errorMessages"));
} else {
console.log("this is else statement");
ctrl.$setValidity('date', false);
appendErrorMessage($scope.$eval(attrs.icceErrorList),
field, errorMsg, $scope.$eval("errorMessages"));
}
} else {
ctrl.$setValidity('myDirective', true);
removeErrorMessage($scope.$eval(attrs.icceErrorList),
field, $scope.$eval("errorMessages"));
}
return isValid;
}
ctrl.$setValidity('myDirective', true);
var value = ctrl.$viewValue;
var unregisterFormSubmit = $scope.$on("formSubmitted", function(mass) {
var modelValue = ctrl.$modelValue;
$scope.validation();
isDateValid(modelValue, isValid, true);
});
//ctrl.$parsers.unshift(isDateValid);
// ctrl.$formatters.unshift(isDateValid);
// unregister the watches on scope destroy
$scope.$on("$destroy", function() {
ctrl.$setValidity('myDirective', true);
removeErrorMessage($scope.$eval(attrs.icceErrorList),
field, $scope.$eval("errorMessages"));
unregisterFormSubmit();
});
}
};
});