JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app='app' ng-controller='ctrl'>
    <p> Default validation is on <input type='url' ng-model='myurl'></p>
        <p> Default validation is off <input type='url' ng-model='myurl2' ng-pattern="/^https?://www.youtube.com/watch\?v=|^https?://youtu.be\//i " required ignore-type></p>
</div>

CSS

.ng-valid {
    border: 1px black solid;
}
.ng-invalid {
    border: 1px red solid;
    background: #ffdddd;
}

JavaScript

angular.module('app', []).controller('ctrl', function($scope) {
    $scope.myurl = $scope.myurl2 = 'invalid';
}).directive('ignoreType', function() {
    return {
        priority: 500,
        compile: function(el, attrs) {
            attrs.$set('type', null, false);
        }
    }
});;