Question

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

以上代码呈现表单，但没有错误消息。我希望一旦页面加载，＆＃34; name＆＃34;字段是＆＃34; red＆＃34;，因为它应该包含错误。角度模式形式的文档假定人们对角度如何工作有直觉，因此代码片段与它们在代码中的位置无关。还有拼写错误，比如没有美元的范围和

"validationMessages": { "userNameAlreadyTaken" }

我不确定，是否应该有清单或什么？列表不起作用。事件广播也不起作用。根据文档尝试了custom和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);

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

1 个答案: