Angularjs: form validation and input directive

Question

I created a directive in an AngularJS app which produces styled input in my application. It looks like this:

AC.directive(\'formInput\',function ($compile) {         


        

Answer 1

Try my dynamic-name directive here: AngularJS dynamic form field validation

Replace name="{{opts.inputname}}" with dynamic-name="opts.inputname"

I also simplified your code for demonstration:

app.directive("dynamicName", function($compile) {
  return {
    restrict: "A",
    terminal: true,
    priority: 1000,
    link: function(scope, element, attrs) {
      var name = scope.$eval(attrs.dynamicName);
      if (name) {
        element.attr('name', name);
        element.removeAttr("dynamic-name");
        $compile(element)(scope);
      }
    }
  };
});

app.directive('formInput', function($compile) {
  return {
    replace: true,
    scope: {},
    templateUrl: 'formInput.html',
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.opts = attrs;


      $compile(element.contents())(scope);
    }
  }
});

Form Input template:

  
   //use dynamic-name directive to bind dynamic names.

DEMO (try clearing the text to see the validation, I used required validation for quick demonstration, you could change the code to email validation). The key is using the dynamic-name directive.