如何在angular-schema-form中插入后端验证错误消息？

Question

我正在评估angular，读取documentation，并试图理解在哪里插入错误消息，这些消息来自后端(在下面的示例中- name字段上的userNameAlreadyTaken )，来自文档的示例，我试图猜测应该将东西放在哪里：

<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>

上面的代码呈现表单，但没有错误消息。我希望页面加载后，"name“字段是"red"，因为它应该包含一个错误。angular-schema-form的文档编制假设人们对angular是如何工作的有直觉，因此代码片段与它们在代码中的位置无关。还有一些打字错误，比如没有美元的范围和

"validationMessages": { "userNameAlreadyTaken" }

我不确定，应该有一个清单还是什么？列表不起作用。事件广播也不起作用。根据文档，已尝试自定义和tv-4。

我甚至不确定我是不是在正确的地方呼叫广播。以及如果我需要从其他地方调用它，如何访问正确的$scope。

Answer 1

Angular模式表单文档确实包含错误。

下面是一个有效的示例：

<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 already 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>

主要问题是：

"validationMessages": {
    "userNameAlreadyTaken"
}

当然，这不是有效的JavaScript，它应该是这样的(键值对)：

validationMessage: {
    userNameAlreadyTaken: "Username already taken!"
}

在你的控制器中，你可以这样做：

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

在此之前，您只需编写与后端通信的代码并处理响应即可。

此外，如果需要，还可以添加多条消息：

validationMessage: {
   "userNameAlreadyTaken": "Username already taken!",
   "someOtherMessage": "Some other validation message."
}
...
$scope.$broadcast('schemaForm.error.name', "userNameAlreadyTaken", false);
$scope.$broadcast('schemaForm.error.name', "someOtherMessage", false);