5

我是角度的新手。我正在尝试一些事情并被卡住了。在我的表单中，我想将服务器验证响应显示为来自 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)
    );
}

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

4

3 回答 3

6

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

共享方法处理以下内容：

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

总的想法是创建一个可重用的服务，它知道如何检测错误以及如何将它们添加到响应式表单中，该服务可以处理客户端和服务器错误，让我们调用它，ErrorService该服务可以具有类似的函数renderServerErrors(form: FormGroup, response: ErrorResponse)服务器响应并验证表单中是否有任何错误要呈现。

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

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

如果您注意，错误响应会被处理，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"
    }
  ]
}
  • 当字段无效时，它会显示红色边框并显示验证错误。
  • 当一个字段有有效数据时，它会得到一个绿色边框。

这是它的外观： 在此处输入图像描述

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

于 2019-09-01T16:45:37.917 回答
1

组件.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
        }
    );
}
于 2019-09-01T16:27:38.163 回答
0

所以这就是它的工作原理。
感谢大家回答我的问题。
组件类方法：

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

模板中的表格：

 <div class="form-group">
            <label>Firstname</label>
            <input
              type="text"
              formControlName="firstname"
              name="firstname"
              class="form-control rounded-0"
              [class.is-invalid]="errors.firstname"
            />
            <span *ngIf="errors.firstname" class="text-danger">{{
              errors.firstname
            }}</span>
          </div>
于 2020-11-27T19:05:02.560 回答