Form Input Field Validation Using Directives
<p>I want to apply "ng-pattern" to the form input fields using a directive. Let's say I want to check if the value provided is an integer or not.</p>

<p>form-markup</p>

<pre><code>&lt;form class="form" name="frm" novalidate&gt;
&lt;div class="form-group"&gt;
    &lt;label class="control-label"&gt;Age&lt;/label&gt;
    &lt;input int
        type="text"
        name="age"
        class="form-control"
        ng-model="fd.age"&gt;
        &lt;span class="help-block" ng-show="frm.age.$error.pattern"&gt;
           age is just a number.
        &lt;/span&gt;
&lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>and the directive code is like this</p>

<pre><code>app.directive("int", function($compile){
    return {
        restrict: "A",
        scope: true,
        replace: true,
        link: function(scope, elem, attrs) {
            elem.attr("ng-pattern", "/[0-9]+/");
        }
    }
});
</code></pre>

<p>In the markup I can see that it is applied properly but still it doesn't work. The pattern is correct because when I use it explicitly in the markup without using the directive it works nicely.</p>

<p>I have two questions.</p>

<ol>
<li><p>Why this doesn't work?</p></li>
<li><p>Since I have to write a lot of such domain specific directives, is my approach correct to solve this problem pattern.</p></li>
</ol>