使用 angular-formly 处理服务器端错误答案

【问题标题】：Server side errors handling with angular-formly使用 angular-formly 处理服务器端错误
【发布时间】：2016-05-10 15:15:48
【问题描述】：

我正在寻找有关如何显示服务器响应的错误的解决方案，这是对每个无效提交的响应，因此我想在应用程序级别而不是控制器中创建错误处理程序。我想在 FORM 级别和字段级别都显示错误。

我有一个 REST API，如果出现错误，它会返回以下 JSON 对象：

{
  "message": "Validation error: Validation notEmpty failed,\nValidation error: Validation isEmail failed",
  "errors": [
    {
      "field": "username",
      "message": "Validation notEmpty failed"
    },
    {
      "field": "email",
      "message": "Validation isEmail failed"
    }
  ]
}

如果有任何错误，我如何创建一个显示错误的服务？

谢谢

【问题讨论】：

标签： angularjs angular-formly

【解决方案1】：

所以，我为另一个答案创建了这个。让我知道这种设置是否适合您。在这里，错误旨在显示在按钮单击后服务器的响应中。您可以进行相应的修改。

我已为该字段提供了一个自定义模板，如下所示：

 formlyConfigProvider.setWrapper({
      name: 'inputWrapper',
  template: '<div ng-class="to.changeColor==\'red\'? \'redBorder\' : \'otherBorder\'"><formly-transclude></formly-transclude>{{to.keyVal}}</div>'
    });

表单元素通过模式格式定义，以允许单独访问每个元素。

vm.schema={
    "schema": {
        "coolValue" : [{
                "key": "coolValue",
                "type": "input",

          "wrapper": ['inputWrapper'],
                "templateOptions": {
                   "type" : "text",
                  "label": 'Cool Value',
                  "keyVal":"",
                  "changeColor":"green"
                }

         }]


    }

};

最后，onSubmit 函数

function onSubmit() {

//Do whatever you want here
//Let's say your server returns an error "iNVALID Credentials"
   var response={
  "error": {
    "errors": [
      {
        "domain": "global",
        "reason": "authError",
        "message": "Invalid Credentials",
        "locationType": "header",
        "location": "Authorization",
      }
    ],
    "code": 401,
    "message": "Invalid Credentials"
  }
};
vm.schema.schema.coolValue[0].templateOptions.changeColor="red";
      vm.schema.schema.coolValue[0].templateOptions.keyVal=response.error.message;

    }
  });

您基本上可以在此处传递来自服务器的任何错误消息或响应。

CSS 包含一个类，用于将红色 border 添加到该字段。您可以随意禁用此功能。如果您还需要此区域的任何内容，请随时 ping。

这是DEMO

【讨论】：

嗨 Satej，谢谢您的回答。我不明白为什么我需要创建一个自定义字段包装器并且不能使用现有的。
嗨@Asaf，我遇到了多个示例，并且他们采用了自定义路线，包括官方doc 上的示例。此外，我在您的评论中尝试了这种方法，但并没有真正成功地设置 fc.$error ，而不是在验证中设置它。