title: Angularjs: form validation and input directive
body: <p>I created a directive in an AngularJS app which produces styled input in my application. It looks like this:</p>
  
  <pre><code>AC.directive('formInput',function ($compile) {
      return {
          transclude: true,
          replace: true,
          scope:{},
          templateUrl: '/views/partials/form/input.html',
          restrict: 'E',
          link: function(scope, element, attrs){
  
              scope.opts = attrs;
  
              if(attrs.ngModel){
                  element.find('input').attr('ng-model', attrs.ngModel);
                  $compile(element.contents())(scope.$parent);
              }
  
              if(!attrs.type){
                  scope.opts.type = 'text';
              }
          }
      };
    }
  )
  </code></pre>
  
  <p>And the template for it is:</p>
  
  <pre><code>&lt;label class="acxm-textfield {{opts.cssclass}}"&gt;
    &lt;span ng-bind="opts.labeltext"&gt;&lt;/span&gt;
    &lt;input type="{{opts.type}}" name="{{opts.inputname}}" value="{{opts.inputvalue}}" placeholder="{{opts.placeholder}}" ng-maxlength="{{opts.maxLength}}"/&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>The call is simple: </p>
  
  <pre><code>&lt;form-input ng-model="UserProfile.FirstName" max-length="50" labeltext="{{'GENERAL.name' | translate}}" cssclass="acxm-p-horizontal" inputname="name" inputvalue="{{UserProfile.FirstName}}"&gt;&lt;/form-input&gt;
  </code></pre>
  
  <p>I wanted to create validation for this field and I added an error information:</p>
  
  <pre><code>&lt;span ng-show="showError(userInfoForm.name,'email')"&gt;
                      You must enter a valid email
  &lt;/span&gt;
  </code></pre>
  
  <p>And showError is:</p>
  
  <pre><code>$scope.showError = function(ngModelController, error) {
  
      return ngModelController.$error[error];
  };
  </code></pre>
  
  <p>Basically, it is copied from the book "Mastering Web Application Development with AngularJS". I have a problem because when I log my form, which name is <code>userInfoForm</code>, in console I got <code>{{opts.inputname}}</code> instead of name property which value here should be "name". What am I doing wrong?</p>