CODEWITHSUNDEEP
javascriptangularjsvalidationangularjs-directive
CodySchaaf
CodySchaaf

Reputation: 347

I want to be able to set Angulars ng-pattern inside a directive with a template and it's own scope to validate a form

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.

Upvotes: 0

Views: 3724

Answers (2)

Pauli Price
Pauli Price

Reputation: 4247

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

Upvotes: 2

coreylight
coreylight

Reputation: 81

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.

Upvotes: 1

Related Questions