I am trying to implement a mask for an input field where users can only input symbols following a specific template: "01ABC2345-67-89" - two digits, followed by three characters, then four digits, a "-", two more digits, another "-" and finally, two more digits. Currently, my code only filters out numbers. How can I create a regular expression to achieve this objective?
Here is the HTML:
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>serialNumber mask</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="text" id="serialNumber" ng-model="model.serialNumber">
<br>
<label for="serialNumber">format: 01ABC2345-67-89</label>
<br><br>
{{model.serialNumber}}
</body>
</html>
and here is the JavaScript:
var app = angular.module('app', []);
app.controller('myCtrl', function ($scope) {
$scope.model = {};
$scope.$watch('model.serialNumber', function (newValue, oldValue) {
console.log('newValue', newValue);
var regex = new RegExp('^\\d+$');
if (newValue) {
if (!regex.test(newValue)) {
$scope.model.serialNumber = oldValue;
}
}
});
});