Angular Schema Form not displayed

Question

I am using angular-schema-form to display and validate a form.

I have this code in my controller:

MyApp.controller('formCtrl', ['$scope', '$rootScope','$state', '$http',
function ($scope, $rootScope,  $state, $http) {

    if (ENV != "dev") {
        formData = localStorage.getItem("signup.v-1.0.0.json")
        $scope.signupSchema=formData.schema;
        $scope.signupForm=formData.form;
        $scope.signupUser=formData.model;
    } else {
        // load the template and cache it
        $http.get("/forms/signup.v-1.0.0.json")
            .then(function (response) {
                console.log(response);
                // template loaded from the server
                $scope.signupSchema = response.data.schema;
                $scope.signupForm = response.data.form;
                $scope.signupUser=response.data.model;
                localStorage.setItem("signup.v-1.0.0.json", response.data);
            });

    }

}
]);

And this in signup-v-1.0.0.json:

{
  "schema":{
    "type": "object",
   "title": "Comment",
    "properties": {
      "name": {
        "title": "Name",
        "type": "string"
      },
      "email": {
        "title": "Email",
        "type": "string",
        "pattern": "^\\S+@\\S+$",
        "description": "Email will be used for evil."
      },
      "comment": {
        "title": "Comment",
        "type": "string",
        "maxLength": 20,
        "validationMessage": "Don't be greedy!"
      }
    },
    "required": [
      "name",
      "email",
      "comment"
    ]
  },
  "form":
  [
    "name",
    "email",
    {
      "key": "comment",
      "type": "textarea",
      "placeholder": "Make a comment"
    },
    {
      "type": "submit",
      "style": "btn-info",
      "title": "OK"
    }
  ],
  "model":
  {
  }
}

In my view:

<div class="col-md-6">
            <div class="featured-box featured-box-secundary default h420">
                <div class="box-content" ng-controller="formCtrl">
                    <h4>Inscription</h4>

                    <p>Inscrivez vous en 2 minutes via ce formulaire.</p>

                    <form sf-schema="signupSchema" sf-form="signupForm" sf-model="signupUser"></form>

                </div>
            </div>
        </div>

I'm passing the schemaForm module to my app :

 MyApp = angular.module('MyApp', ['ui.router','pascalprecht.translate','ui.bootstrap','Facebook','googleplus','mgo-angular-wizard','ui','ngMaterial','ngAria','ngAnimate','schemaForm']);

Chrome does not display code, but I have no error messages.

Answer 1

I found the solution.

I need to broadcast 'schemaFormRedraw' to redraw the form in the ajax load result, or after data is retrieved in local storage:

$scope.$broadcast('schemaFormRedraw');