0

我正在评估角度，阅读文档 并试图了解在哪里插入来自后端的错误消息（在下面的示例中 - 名称字段上的 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>

上面的代码呈现了表单，但没有错误消息。我希望页面加载后，“名称”字段为“红色”，因为它应该包含错误。angular-schema-form 的文档假设人们对 angular 的工作原理有直觉，因此代码片段与它们在代码中的位置无关。还有一些错别字，比如没有美元的范围和

"validationMessages": { "userNameAlreadyTaken" }

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

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

4

1 回答 1

0

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);
于 2015-05-29T10:27:42.790 回答