Could not display angular schema form in modal pop up

Question

I am trying to make a form as a angular-schema-form from the json data. My scenario is that,I have a grid for which i am using ng-grid for that. So on every row of the grid I have a edit button which allows the user to edit the row data.On click of edit Button a modal pop up appears .So here is where I am desing my modal popup form as an angular-schema-form.Here is what I have tried.

This is my edit button template in a grid

<div class="ui-grid-cell-contents">
  <button type="button"
     class="btn btn-xs btn-primary"
     ng-click="editRow(grid,row);">

  </button>
</div>

My modal pop up Template is like

<div>
  <div class="modal-header">
      <h3 class="modal-title">Edit Row</h3>
  </div>
  <div class="modal-body">
    <form sf-schema="schema" sf-form="form" sf-model="entity"></form>
  </div>
  <div class="modal-footer">
      <button class="btn btn-success" ng-click="save()">Save</button>
      <button class="btn btn-warning" ng-click="$close()">Cancel</button>
  </div>
</div>

In my js file i have coded as below,This is present in Main Controller

 $scope.editRow = function (grid, row) {
        $modal.open({
            templateUrl: 'PopUpTemplate.htm',
            controller: function ($scope,$modalInstance,UserPopUpSchema, grid, row) {
               schema = UserPopUpSchema;
               entity = angular.copy(row.entity);
               form = [
           'FullName',
           'UserName',
           'Password',
           'EmailId',
           'phNum'
           ];


            },
            resolve: {
                grid: function () { return grid; },
                row: function () { return row; },
                UserPopUpSchema: function () {
                    return UserPopUpSchema;
                }
            }
        });
    };
} ]);

Here user pop up schema is a constant like below:

app.constant('UserPopUpSchema', {
    type: 'object',
    properties: {
        FullName: { type: 'string', title: 'FullName' },
        UserName: { type: 'string', title: 'UserName' },
        Password: { type: 'string', title: 'Password' },
        EmailAddress: { type: 'string', title: 'EmailId' },
        Phone: {type:'string',title:'phNum'}
    }
});

I have added js files correctly as given in the angular -schema-form documentation.But I could not display angular-schema-form.

Appreciate your help

One of the solution for your query can be found in below link https://stackoverflow.com/questions/52530909/angular-schema-form-modal-problems-with-scope — shanjock46, Oct 10 '18 at 08:47

score 0 · Accepted Answer · answered Dec 21 '15 at 05:46

So here I have replaced my form in modal pop-up

 form = [
           'FullName',
           'UserName',
           'Password',
           'EmailId',
           'phNum'
           ];

with

form["*"];

Probably it might be a syntax error.

And I have to access form,model,schema with scope dependency in a controller as $scope.form,$scope.model,$scope.schema

Could not display angular schema form in modal pop up

1 Answers1