CODEWITHSUNDEEP
jsonangularjs
Harish Balakrishnan
Harish Balakrishnan

Reputation: 101

Dynamic form Generation in angularjs with action button ng-click

I need to generate the form fields dynamically as per the json structure. (As of now I have used as a js file). I have succeenter code heressfully generated the fields in the webpage. I need help to add action items to the "button" part.

E.g: I have generated the text and button field with validation. But I need button click functionality in angularjs (ng-click or something). Action items may be service / function.

var app = angular.module('test_module',[]);
app.controller('DynamicFormController', function ($scope, $log) {
    $scope.entity = {
      name : "Test", 
      fields :
        [
          {type: "text", name: "firstname", label: "Name" , required: true, data:""},
          {type: "text", name: "city", label: "City" , required: true, data:""},
          {type: "button", name: "test_button", label: "Button_check1" , data:"Dynamic_button"}
        ]
      };

      $scope.submitForm = function(){
        $log.debug($scope.entity);
      }
})
  .directive("dynamicName",function($compile){
    return {
        restrict:"A",
        terminal:true,
        priority:1000,
        link:function(scope,element,attrs){
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        }
    }
})
<!DOCTYPE html>
<html>

  <head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     <script src="FormGeneration.js"></script>
  </head>
  <body ng-app="test_module" >
  <div ng-controller="DynamicFormController">
    <h3>Dynamic Form Generation</h3>
 
 <form name="myForm" ng-submit="submitForm()">
 <div ng-repeat="field in entity.fields">    
  <ng-form name="form">
  <!-- my test result starts-->
  <div ng-if="field.type=='button'">
      <label><h3>{{field.label}}</h3></label>
      <div>
      <input type="{{ field.type}}" name="{{ field.name }}" value ="{{ field.data}}" >
      </div>
  </div>
  <!-- my test result Ends-->

   <div ng-if="field.type=='text'">
      <label>{{field.label}}</label>
      <div>
        <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" data-ng-model="field.data" required/>
         <!--<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>.-->
         <span  data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>
      </div>
    </div>

  </ng-form>

 </div>


  <br/>
  <button ng-disabled="myForm.$invalid" type="submit" id="submit">normal button Submit</button>
  <br/>
  <!-- <pre>{{entity|json}}</pre> -->
   <br/>
       
 </form>
 </div>
  </body>

</html>

I gave button attributes like:

{type: "button", name: "test_button", label: "Button_check1" , data:"Dynamic_button"}

not gave service / function.

Upvotes: 1

Views: 838

Answers (1)

ThibaudL
ThibaudL

Reputation: 1009

If you want to had an attribute service/function to your json then use it the same as you did by adding 

ng-click="$eval(field.function)"


var app = angular.module('test_module',[]);
app.controller('DynamicFormController', function ($scope, $log) {
    $scope.entity = {
      name : "Test", 
      fields :
        [
          {type: "text", name: "firstname", label: "Name" , required: true, data:""},
          {type: "text", name: "city", label: "City" , required: true, data:""},
          {type: "button", name: "test_button", label: "Button_check1" , data:"Dynamic_button", function : 'test()'}
        ]
      };

      $scope.submitForm = function(){
        $log.debug($scope.entity);
      }

      $scope.test = function(){
        $log.debug('clicked');
      }
})
  .directive("dynamicName",function($compile){
    return {
        restrict:"A",
        terminal:true,
        priority:1000,
        link:function(scope,element,attrs){
            element.attr('name', scope.$eval(attrs.dynamicName));
            element.removeAttr("dynamic-name");
            $compile(element)(scope);
        }
    }
})
<!DOCTYPE html>
<html>

  <head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
     <script src="FormGeneration.js"></script>
  </head>
  <body ng-app="test_module" >
  <div ng-controller="DynamicFormController">
    <h3>Dynamic Form Generation</h3>
 
 <form name="myForm" ng-submit="submitForm()">
 <div ng-repeat="field in entity.fields">    
  <ng-form name="form">
  <!-- my test result starts-->
  <div ng-if="field.type=='button'">
      <label><h3>{{field.label}}</h3></label>
      <div>
      <input type="{{ field.type}}" name="{{ field.name }}" value ="{{ field.data}}" ng-click="$eval(field.function)" >
      </div>
  </div>
  <!-- my test result Ends-->

   <div ng-if="field.type=='text'">
      <label>{{field.label}}</label>
      <div>
        <input type="{{ field.type }}" dynamic-name="field.name" id="{{field.name}}" data-ng-model="field.data" required/>
         <!--<span ng-show="myForm.{{field.name}}.$dirty && myForm.{{field.name}}.$error.required">Required!</span>.-->
         <span  data-ng-show=" {{'form.'+field.name+'.$dirty && form.'+field.name+'.$error.required'}}">Required!</span>
      </div>
    </div>

  </ng-form>

 </div>


  <br/>
  <button ng-disabled="myForm.$invalid" type="submit" id="submit">normal button Submit</button>
  <br/>
  <!-- <pre>{{entity|json}}</pre> -->
   <br/>
       
 </form>
 </div>
  </body>

</html>

Upvotes: 1

Related Questions