CODEWITHSUNDEEP
angularjsangularjs-ng-repeatangularjs-ng-include
Kathir
Kathir

Reputation: 6196

Angular Nested form fields using directive

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.

Upvotes: 0

Views: 459

Answers (1)

allenhwkim
allenhwkim

Reputation: 27738

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

Upvotes: 1

Related Questions