如何以角度形式执行和显示服务器验证错误

Question

我是角度的新手。我正在尝试一些东西并被卡住了。在我的表单中，我想将服务器验证响应显示为来自 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)在每个服务器响应并验证表单中是否有任何要呈现的错误。

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

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

• 登录.component.ts
• 登录.component.html
• 错误.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"
    }
  ]
}

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

这是它的外观：

如果有什么不清楚的，请随时询问。

Answer 2

组件.html：

<input formControlName="firstName">
<span *ngIf="errMsg.firstname"> {{errMsg.firstname}} </span>
<input formControlName="lastname">
<span *ngIf="errMsg.lastname"> {{errMsg.lastname}} </span>
<input formControlName="email">
<span *ngIf="errMsg.email"> {{errMsg.email)}} </span>
<input formControlName="password">
<span *ngIf="errMsg.password"> {{errMsg.password)}} </span>
<button type="submit" (click)="registerUser()>Submit</button>

组件.ts：

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