Angular Nested form fields using directive

Question

I am trying to create a form dynamically using server response. The form may have fields which are nested, grouped and so on. I have tried creating a directive for my field type as 'form-field' and used ng-include directive to repeat for all the nested fields.

When i do this using a ul-li, the output looks correct but when i start using fieldsets and textfields the output does not render at all for the textfields.

    // Code goes here

angular.module('NestedForm', []).
controller('formController', function($scope) {


}).directive('formField',function($compile) {
  return {
        replace:true,
        require:'ngModel',
        scope:{
          data :'=data',
          ngModel : '='
        },
        restrict:'E',
        link : function($scope, $element, $attrs)
        {
          var type = $scope.data.type;
          var html = "";
          switch(type)
          {
            case 'textbox' :
              html = '<input id=\''+$scope.data.name+'\'  type="text" ng-model="ngModel" class="form-control">';break;
            case 'fieldset' :
              html = '<fieldset><legend>'+$scope.data.name+'</legend></fieldset>';break;
            default:
              break;
          }
          var $e =$compile(html)($scope);
          $element.replaceWith($e);
        }
  }
});

http://plnkr.co/edit/9b7wnPaaeppdJyq26qlN

Appreciate your help.

allenhwkim · Accepted Answer · 2014-10-11 01:15:21Z

1

First, your question is too long. Many people just want to read question fast, understand, and answer if they know about it. If question is too long, we don't read fast, understanding is not correct, and answer does not come from the full understanding of your question.

I don'f fully read your question, but it seems you are replacing the full element.

Check this out.

http://plnkr.co/edit/01T5d4ngGviKI0jPafSO?p=preview

      var $e =$compile(html)($scope);
      $element.append($e);  //instead of replacing it

edited Oct 11, 2014 at 1:15

answered Oct 10, 2014 at 22:19

allenhwkim

27.8k18 gold badges93 silver badges128 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kathir Over a year ago

Sorry about the long post issue. For some reason, when i posted i had to place code and i placed the whole thing. Thanks for the solution. This solves my problem partially. I am trying to get the form-fields inside the <fieldset></fieldset>. Should i be using compile instead of link.

allenhwkim Over a year ago

1. because form cannot have a form, there is no nested form. You may say nested fieldsets. 2. fieldset is a container, and input field are items, it should have different directives. 3. within fieldset it generates html, including text and fieldset directives then compile it.

Collectives™ on Stack Overflow

Angular Nested form fields using directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related