0

This is part of a much more complicated directive that needs to have its own scope as well as require ngModel and replace the existing input. How can I have the directive add the ng-pattern attribute? As you can see in this jsfiddel the validation doesn't change based on the input if the ng-pattern is added in the template. This is because this will be added to an existing application that has a ton of different attributes already on a ton of different input elements, and I'm trying to make the addition as easy to implement as possible by just adding functionality to the existing input fields without messing up other things.

http://jsfiddle.net/MCq8V/

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';
}

Thanks so much for any help! Ideally I would be able to just change something small and keep the ng-pattern, but I think I may have to do the validation setting on my own.

CodySchaaf
  • 347
  • 1
  • 4
  • 16

2 Answers2

2

Here's how the pattern attribute is added to input item in a directive I have in my application. Note the use of compile at the end of the link function. In your case, rather than replace the element contents with a template, you'd just work with the existing element input tag.

        link: function (scope, element, attrs, formController) {

            // assigned template according to form field type
            template = (scope.schema["enum"] !== undefined) && 
                       (scope.schema["enum"] !== null) ? 
                       $templateCache.get("enumField.html") : 
                       $templateCache.get("" + scope.schema.type + "Field.html");
            element.html(template);

            // update attributes - type, ng-required, ng-pattern, name
            if (scope.schema.type === "number" || scope.schema.type === "integer") {
                element.find("input").attr("type", "number");
            }
            element.find("input").attr("ng-required", scope.required);

            if (scope.schema.pattern) {
                element.find("input").attr("ng-pattern", "/" + scope.schema.pattern + "/");
            }
            element.find("input").attr("name", scope.field);

            // compile template against current scope
            return $compile(element.contents())(scope);
        }
Pauli Price
  • 4,187
  • 3
  • 34
  • 62
  • This works, and I'll keep it in mind for future projects. Thanks a bunch. coreylight's answer was just a little simpler. Thanks again for your help! – CodySchaaf Jun 24 '14 at 21:19
1

I tried quite a few things and it seemed that using a directive to replace an input with an input was tricking Angular up somewhere - so this is what I came up with: http://jsfiddle.net/MCq8V/1/

HTML

<div ng-app="demo" ng-init="" ng-controller="Demo">
  <form name="myForm" ng-submit="onSubmit()">
    <div lowercase model="data"></div>
    Valid? {{myForm.number.$valid}}
    <input type="submit" value="submit"/>
  </form>
</div>

JS

var module = angular.module("demo", []);
module.directive('lowercase', function() {
return {
    restrict: 'A',
    scope:{
        data:'=model'
    },
    replace: true,
    template: '<input class="something" ng-pattern="/^\\d*$/" name="number" ng-model="data" type="text">',
    };
});

module.controller('Demo', Demo);

function Demo($scope) {
  $scope.data = 'Some Value';
}

Also, you needed to escape your backslash in your regex with another backslash.

coreylight
  • 81
  • 3