i encountered an issue while trying to create an input mask using ui-mask in AngularJs. I want the textarea to turn green when the entered string is correct. However, in my case, the textarea starts off green and then turns red when a word is typed until the correct word is entered. I have tried numerous solutions but nothing seems to work. Below is my index.html code:
<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<head>
<meta charset="utf-8">
<title>I am Tom</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<script type="text/javascript" src="js/angularjs/mask.js"></script>
<script type="text/javascript" src="js/angularjs/module.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body ng-controller="myController">
<div class="divito">
<h3 clas="h3">Please Input following text: I am Tom</h3>
<textarea class="textarea" style="resize: none" cols="30" row="2" ui-mask="i am tom" ng-model="greeting" data-ng-trim="fasle" ng-trim="false">
</textarea>
</div>
</body>
</html>
Style.css
body{
background-color: #fbfbfb;
}
.textarea{
width:600px;
height:60px;
text-align: center;
font-size: 43px;
border-radius: 10px;
}
.divito {
margin: 200px 30% 0 33%;
position: relative;
}
textarea.ng-invalid {
border:2px solid #EA4335;
}
textarea.ng-valid {
background-color:lightgreen;
}
And here is my script.js
var app = angular.module('myApp',[]);
app.controller('myController', ['$scope', function ($scope) {
$scope.greeting = '123456789';
}]).directive('uiMask', [
function () {
var maskDefinitions = {...}; // omitted for brevity
return {
... // directive logic omitted for brevity
};
}
]);