I am working on a complex directive that requires its own scope, ngModel, and the replacement of the existing input. How can I make the directive include the ng-pattern attribute? In this example in jsFiddle, you can see that the validation does not change based on the input when the ng-pattern is added in the template. This project involves integrating with an existing application that already has numerous attributes on various input elements. My goal is to seamlessly add functionality to these existing input fields without causing any disruptions.
HTML
<div ng-app="demo" ng-init="" ng-controller="Demo">
<form name="myForm" ng-submit="onSubmit()">
<input lowercase type="text" ng-model="data" name="number">
Valid? {{myForm.number.$valid}}
<input type="submit" value="submit"/>
</form>
</div>
JS
var module = angular.module("demo", []);
module.directive('lowercase', function() {
return {
require: 'ngModel',
restrict: 'A',
scope:{},
replace: true,
link: function(scope, element, attr, ngModelCntrl) {
},
template: '<input class="something" ng-pattern="/^\d*$/">',
};
});
module.controller('Demo', Demo);
function Demo($scope) {
$scope.data = 'Some Value';
}
Thank you for any assistance provided! Ideally, I would like to make minor adjustments to retain the ng-pattern, but it seems like I may need to handle the validation setup independently.