JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app">
    <form name="theForm" ng-controller="FormCtrl">
        <input type="text" ng-model="opendate" ng-minlength="1" ng-maxlength="10" ng-attr-mynewpattern="/^[0-9,/]+$/" onfocus=buttonClicked()>
    </form>
</div>

JavaScript

var app = angular.module("app", []);

app.controller("FormCtrl", function ($scope) {
    $scope.buttonClicked = function () {
        $scope.isValid($scope.opendate);
        if ($scope.isValid($scope.opendate)) {
            $scope.el.css({ border: "2px solid red" });
        }
        else {
            $scope.el.css({ border: "2px solid green" });
        }
    },

    $scope.isValid = function(value) {
        var pattern = new RegExp($scope.pattern.substr(1, $scope.pattern.length - 2));
        if (!pattern.test(value)) {
            return true;
        } else {
            return false;
        }
    }
});

app.directive("mynewpattern", function () {
    return {
        restrict: "A",
        link: function (scope, el, attrs) {
            scope.pattern = attrs.mynewpattern;
            scope.el = el;
        }
    };
});