angularjs - How to insert backend validation error message into angular-schema-form? -

i evaluating angular, reading documentation , trying understand insert error messages, come backend (in example below - usernamealreadytaken on name field), example documentation attempt guess put things:

<script> $( document ).ready(function() { angular.module('mymodule', ['schemaform']); angular.module('mymodule', ['schemaform'])        .controller('formcontroller', function($scope) {   $scope.schema = {     type: "object",     properties: {       name: { type: "string", minlength: 2,                title: "name", description: "name or alias"       },       title: {         type: "string",         enum: ['dr','jr','sir','mrs','mr','nan','dj']       }     }   };    $scope.form = [    {     "key": "name",     "validationmessages": {          "usernamealreadytaken"     }    },    {          type: "submit", style: 'btn-success', title: "save"}   ];   $scope.model = {};   $scope.$broadcast('schemaform.error.name','tv4-302',false); }); angular.bootstrap(document, ['mymodule']); }); </script>  <div ng-controller="formcontroller">    <form sf-schema="schema" sf-form="form" sf-model="model" action="action_url" ></form> </div> 

and above code renders form, without error message. expect once page loaded, "name" field "red", because supposed contain error. documention of angular-schema-form assumes 1 has intuition on how angular works, code snippets without relation location in code. , there typos, scope without dollar ,

"validationmessages": { "usernamealreadytaken" } 

i not sure, should there list or what? list doesn't work. event broadcast not work. tried both custom , tv-4, per documentation.

i not sure calling broadcast right place. , how access right $scope if need call somewhere else.

angular schema form documentation contain errors.

here working example:

<script>   $(document).ready(function() {     angular.module('mymodule', ['schemaform']);     angular.module('mymodule', ['schemaform'])       .controller('formcontroller', function($scope) {         $scope.schema = {           type: "object",           properties: {             name: {               type: "string",               minlength: 2,               title: "name",               description: "name or alias"             },             title: {               type: "string",               enum: ['dr', 'jr', 'sir', 'mrs', 'mr', 'nan', 'dj']             }           }         };         $scope.form = [{           key: "name",           validationmessage: {             usernamealreadytaken: "username taken!"           }         }, {           type: "submit",           style: 'btn-success',           title: "save"         }];          $scope.model = {};          $scope.onsubmit = function(form) {           $scope.$broadcast('schemaform.error.name', 'usernamealreadytaken', false);         };        });     angular.bootstrap(document, ['mymodule']);   }); </script>  <div ng-controller="formcontroller">   <form sf-schema="schema" sf-form="form" sf-model="model" action="action_url" name="myform" ng-submit="onsubmit(myform)"></form> </div> 

main problem was:

"validationmessages": {     "usernamealreadytaken" } 

this, of course, not valid javascript , should (key value pair):

validationmessage: {     usernamealreadytaken: "username taken!" } 

and in controller can this:

if (valid) {     $scope.$broadcast('schemaform.error.name', 'usernamealreadytaken', true); } else {     $scope.$broadcast('schemaform.error.name', 'usernamealreadytaken', false); } 

before need write code comunicates backend , handle response.

also, if need to, can add multiple messages:

validationmessage: {    "usernamealreadytaken": "username taken!",    "someothermessage": "some other validation message." } ... $scope.$broadcast('schemaform.error.name', "usernamealreadytaken", false); $scope.$broadcast('schemaform.error.name', "someothermessage", false);