Search code examples
angularjsangular-schema-form

Getting existing data from the server and using it in angular schema form

I have a form that i have created using angular schema form and i have posted it to the server. I now want to take to edit the data i posted. I can get the data like this for isntance

app.controller('FormController', function($scope,$http){
   $http.get("data/data.json").then(
      function success(response) {
        $scope.schema = angular.fromJson(response.data);
      },
      function error(response) { /* handle error */ });
   // do other stuff
});

How do i populate the data i got from the server to the existing forms that i have created?.

How does angular schema form do this?.

Solution

  • Guessing your data. from the $http. you could do this. sorry for the vm. im always use controllerAs.

    //Edited i added the functionality of the $http for you example.

    var app = angular.module('plunker', ['schemaForm']);

    app.controller('MainCtrl', function($scope) {
      var vm = this;

      vm.form = [
        "*",
        {
          "type": "submit",
          "title": "OK"
        }
      ];

      vm.schema = {
        "type": "object",
        "title": "Types",
        "properties": {
          "string": {
            "type": "string",
            "minLength": 3
          },
          "integer": {
            "type": "integer"
          },
          "number": {
            "type": "number"
          },
          "boolean": {
            "type": "boolean"
          }
        },
        "required": [
          "number"
        ]
      };

      vm.model = {boolean: true, string:'abc', integer:1234, number:3.1416};

      vm.loadData = function(){
          $http({
            method:'GET',
            url:'data.json'
          }).then(function(response){
            var data = response.data;
            vm.form = data.form;
            vm.schema = data.schema;
            vm.model = data.model;
          });
      };

    });

    HTML

    <!DOCTYPE html>
  <html ng-app="plunker">

    <head>
      <meta charset="utf-8" />
      <title>AngularJS Plunker</title>
      <script>document.write('<base href="' + document.location + '" />');</script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <link rel="stylesheet" href="style.css" />
      <script data-require="[email protected]" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.11/angular-sanitize.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
      <script src="objectPath.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/tv4/1.3.0/tv4.min.js"></script>

      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-schema-form/0.8.13/schema-form.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-schema-form/0.8.13/bootstrap-decorator.js"></script>
      <script src="app.js"></script>
    </head>

    <body ng-controller="MainCtrl as vm">
      <form sf-schema="vm.schema" sf-form="vm.form" sf-model="vm.model"></form>

      <pre>{{vm.model}}</pre>
                <button class="btn btn-default" ng-click="vm.loadData()">Other Schema</button>

    </body>

  </html>

    data.json

    {
  "form":
  [
        "*", {
          "type": "submit",
          "title": "OK",
          "style": "btn-success"
        }
      ],
  "schema":{
        "type": "object",
        "title": "Types",
        "properties": {
          "name": {
            "type": "string",
            "minLength": 3
          },
          "lastName": {
            "type": "string"
          },
          "age": {
            "type": "number"
          },
          "boolean": {
            "type": "boolean"
          }
        },
        "required": [
          "number"
        ]
      },
    "model":{
        "boolean": true,
        "name": "john",
        "lastName": "Doe",
        "age": 34
      }

}

    this is the new plnkr

    The key for the edit mode is in your response from the server plus the form and schema, you need to put the vm.model, and remember the model needs to fit whith the schema attributes.