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

Question

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

我有一个 REST API，如果出现错误 return 以下 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"
    }
  ]
}

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

谢谢

Answer 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 包含一个 class 加一个红色 border 到 field.You 可以自由禁用 this.Feel 如果你需要什么可以自由ping在这方面也是如此。

这是一个DEMO

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

Server side errors handling with angular-formly

angularjs

angular-formly