angular - 如何以 Angular 形式显示服务器验证错误

Question

我是 Angular 的新手。我正在尝试一些东西，但卡住了。在我的表单中，我想将服务器验证响应显示为来自 laravel rest api 的错误。但不知道如何在模板中存储和显示它。我能够将它记录到控制台，但无法通过错误消息进一步移动。

响应有点像这样-

{
    "message": {
        "firstname":["The firstname field is required."],
        "lastname":["The lastname field is required."],
        "email":["The email field is required."],
        "password":["The password field is required."]
    }
}

服务代码:

registerUser(user): Observable<any> {
    return this.http
      .post<any>(`${this.url}/register`, user)
      .pipe(map(res => res.message));
}

组件类中的注册用户方法:

registerUser() {
    console.log(this.registrationForm.value);
    this.authService.registerUser(this.registrationForm.value).subscribe(
        res => console.log(res),
        err => console.log(err)
    );
}

另外，如果我在任何地方出错，我应该如何纠正它，请纠正我

Answer 1

我的理解是您希望在验证失败的每个字段上显示错误消息，我已经这样做过几次。

共享方法处理以下内容:

• 从服务器收到错误后，表单将保持无效状态，直到用户更新相关字段。
• 如果出现一般错误(与任何表单字段无关)，它们将由知道如何呈现它们的服务呈现在表单之外。

总体思路是创建一个可重用的服务，该服务知道如何检测错误以及如何将错误添加到响应式表单中，该服务可以处理客户端和服务器错误，我们称它为 ErrorService，这服务可以有一个像 renderServerErrors(form: FormGroup, response: ErrorResponse) 这样的函数，它在每个服务器响应上被调用，并验证是否有任何错误要在表单中呈现。

如果表单具有给定的字段，则会在表单中呈现错误。

您可以看到以下文件来指导您:

• login.component.ts
• login.component.html
• errors.service.ts :

如果你注意的话，错误响应是用 this.errorService.renderServerErrors(this.form, response) 处理的，它会做所有事情，在 https://cryptocoinalerts.net/login 上看到它。 .

更多细节

• 服务器仅在响应状态为非 2xx 时返回验证错误，例如 400(错误请求)、500(服务器错误)等。这意味着您的错误处理程序回调将被调用(err => console .log(err))，如果这个假设不成立，您将需要再次检查以验证响应是否有任何错误。
• 有两种类型的错误，一种与字段相关，一种与字段无关，后者需要单独的方式来显示它们。
• 该示例向您展示了它如何处理略有不同的服务器响应，即:

{
  "errors": [
    {
      "type": "field-validation-error",
      "field": "password",
      "message": "Incorrect password"
    }
  ]
}

• 当字段无效时，它会显示红色边框并显示验证错误。
• 当字段包含有效数据时，它会显示绿色边框。

它是这样的:

如有任何不清楚的地方，请随时询问。